/* ==========================================================================
   ComptaAir UI v4 "Clarté" — design tokens (see /DESIGN.md)
   Light, readable, logo hues only: violet #6532FF (action), blue #4285F4
   (accents/icons), indigo #4B0082 (rare emphasis) + violet-tinted neutrals.
   ========================================================================== */
:root {
  /* Brand (logo) */
  --ui-blue: #4285F4;
  --ui-violet: #6532FF;
  --ui-indigo: #4B0082;
  --ui-gradient: linear-gradient(135deg, #4285F4 0%, #6532FF 45%, #4B0082 100%); /* logo mark only */

  /* Action */
  --ui-primary: #6532FF;          /* white text 6.1:1 */
  --ui-primary-hover: #5524EB;
  --ui-primary-active: #4B1BD6;
  --ui-primary-soft: #F2EEFF;
  --ui-primary-50: #F8F6FF;
  --ui-primary-200: #DCD2FF;
  --ui-primary-ring: rgba(101, 50, 255, .22);
  --ui-link: #5A27F5;
  --ui-accent: #4B0082;
  --ui-accent-soft: #F3EDFA;
  --ui-blue-soft: #EDF4FE;
  --ui-blue-ink: #1F5BC4;          /* AA text derived from logo blue, for info badges */

  /* Neutrals (violet-tinted) */
  --ui-n-0: #FFFFFF;
  --ui-n-25: #FBFAFE;
  --ui-n-50: #F7F6FB;
  --ui-n-100: #EFEDF5;
  --ui-n-200: #E3E0EC;
  --ui-n-300: #CFCADF;
  --ui-n-400: #A19CB7;
  --ui-n-500: #6B6783;
  --ui-n-600: #57536F;
  --ui-n-700: #48445F;
  --ui-n-800: #2E2A47;
  --ui-n-900: #1C1838;

  /* Legacy "ink" names kept for old selectors; v4 never uses them as surfaces */
  --ui-ink-950: #1C1838;
  --ui-ink-900: #1C1838;
  --ui-ink-800: #2E2A47;
  --ui-ink-700: #48445F;
  --ui-ink-line: var(--ui-n-200);
  --ui-ink-text: var(--ui-n-900);
  --ui-ink-muted: var(--ui-n-500);

  /* Semantic (statuses + alerts only) */
  --ui-success: #0F8A5F;
  --ui-success-soft: #E6F6EF;
  --ui-success-ink: #0B6E4B;
  --ui-warning: #B26A00;
  --ui-warning-soft: #FFF4E2;
  --ui-warning-ink: #8A5200;
  --ui-danger: #D0342C;
  --ui-danger-soft: #FDEDEC;
  --ui-danger-ink: #B0271F;
  --ui-gold: #F2A900;             /* rating stars */

  /* Text / surfaces */
  --ui-text: var(--ui-n-900);
  --ui-text-2: var(--ui-n-700);
  --ui-text-3: var(--ui-n-500);
  --ui-border: var(--ui-n-200);
  --ui-border-soft: var(--ui-n-100);
  --ui-border-strong: var(--ui-n-300);
  --ui-bg: #FFFFFF;
  --ui-bg-soft: var(--ui-n-50);
  --ui-surface: #FFFFFF;

  /* Type: one family for FR / EN / AR */
  --ui-font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui-font-display: var(--ui-font);
  --ui-font-body: var(--ui-font);
  --ui-fs-xs: .8125rem;
  --ui-fs-sm: .875rem;
  --ui-fs-md: 1rem;
  --ui-fs-lg: 1.125rem;
  --ui-fs-xl: 1.25rem;
  --ui-fs-2xl: clamp(1.375rem, 1.2rem + .7vw, 1.625rem);
  --ui-fs-3xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);   /* h2 */
  --ui-fs-4xl: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);    /* page h1 */
  --ui-fs-5xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);     /* home display */

  /* Spacing (4px base) */
  --ui-s-1: 4px;  --ui-s-2: 8px;  --ui-s-3: 12px; --ui-s-4: 16px;
  --ui-s-5: 20px; --ui-s-6: 24px; --ui-s-8: 32px; --ui-s-10: 40px;
  --ui-s-12: 48px; --ui-s-16: 64px; --ui-s-20: 80px; --ui-s-24: 96px;
  --ui-section-y: clamp(56px, 4vw + 32px, 104px);

  /* Radius */
  --ui-r-xs: 6px;
  --ui-r-sm: 8px;
  --ui-r-md: 10px;
  --ui-r-lg: 14px;
  --ui-r-xl: 20px;
  --ui-r-2xl: 24px;
  --ui-r-pill: 999px;

  /* Elevation (soft, short) */
  --ui-shadow-xs: 0 1px 2px rgba(28, 24, 56, .05);
  --ui-shadow-sm: 0 1px 2px rgba(28, 24, 56, .05), 0 2px 8px -2px rgba(28, 24, 56, .06);
  --ui-shadow-md: 0 2px 4px rgba(28, 24, 56, .04), 0 10px 24px -8px rgba(28, 24, 56, .12);
  --ui-shadow-lg: 0 4px 8px rgba(28, 24, 56, .04), 0 24px 48px -16px rgba(28, 24, 56, .18);
  --ui-shadow-xl: 0 32px 64px -24px rgba(28, 24, 56, .24);
  --ui-ring: 0 0 0 3px var(--ui-primary-ring);

  /* Layout */
  --ui-container: 1240px;
  --ui-container-wide: 1360px;
  --ui-gutter: clamp(16px, 3vw, 32px);
  --ui-header-h: 72px;

  /* Motion */
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-ease-out: cubic-bezier(.2, .8, .2, 1);
  --ui-dur-1: 150ms;
  --ui-dur-2: 200ms;
  --ui-dur-3: 300ms;
  --ui-dur-4: 450ms;

  /* z-index scale */
  --ui-z-dropdown: 30;
  --ui-z-sticky: 40;
  --ui-z-header: 50;
  --ui-z-overlay: 60;
  --ui-z-modal: 70;
  --ui-z-toast: 80;

  /* Platform legacy variables (style.css) mapped onto v4 */
  --main-color-one: var(--ui-primary);
  --main-color-one-rgb: 101, 50, 255;
  --main-color-two: var(--ui-violet);
  --secondary-color: var(--ui-indigo);
  --secondary-color-rgb: 75, 0, 130;
  --heading-color: var(--ui-text);
  --paragraph-color: var(--ui-text-2);
  --body-color: var(--ui-text-3);
  --border-color: var(--ui-border);
  --border-color-2: var(--ui-border);
  --section-bg-1: var(--ui-bg-soft);
  --section-bg-2: var(--ui-bg-soft);
  --footer-bg-1: var(--ui-bg-soft);
  --active-color: var(--ui-success);
  --success-color: var(--ui-success);
  --danger-color: var(--ui-danger);
  --heading-font: var(--ui-font);
  --body-font: var(--ui-font);
}