/* Fawri.SmartBilling — design tokens (B3G).
   Authority for colours: Docs/handoff/REFERENCE-b3g-brand-tokens.md (sampled from b3g-logo.png).
   This file holds BRAND scales (--b3g-*) and THEME-INVARIANT structural tokens. Colour ROLE
   tokens (--color-*) are defined per theme in themes/{light,dark,system}.css.
   GOLDEN RULE: components reference role tokens only — never these raw values, never hardcoded. */

:root {
  /* ---- Brand: Blue (primary) ---- */
  --b3g-blue-50: #E6F4FB;
  --b3g-blue-100: #C5E6F5;
  --b3g-blue-200: #93D0EC;
  --b3g-blue-300: #4DABD9; /* logo top */
  --b3g-blue-400: #2693C7;
  --b3g-blue-500: #218EC3; /* brand base */
  --b3g-blue-600: #007AB4; /* logo bottom */
  --b3g-blue-700: #006391;
  --b3g-blue-800: #004C6F;
  --b3g-blue-900: #00374F;

  /* ---- Brand: Green (accent / success) ---- */
  --b3g-green-300: #A6D98A;
  --b3g-green-500: #76BE48; /* logo */
  --b3g-green-600: #5C9A33; /* AA text on light */
  --b3g-green-700: #4C7F2A; /* AA text on light */

  /* ---- Brand: Orange (accent / warning) ---- */
  --b3g-orange-300: #FCC766;
  --b3g-orange-500: #FBAD2C; /* logo */
  --b3g-orange-600: #D98A0A;
  --b3g-orange-700: #B26F05; /* badges/borders on light (4.06:1 — large text/UI only) */
  --b3g-orange-800: #9C6405; /* AA body text on light (4.95:1) */

  /* ---- Error / danger: COMPLEMENTARY, OFF-BRAND (the logo has no red) ---- */
  --b3g-red-400: #F08A8A; /* dark-theme text */
  --b3g-red-500: #D64545; /* light surfaces */
  --b3g-red-700: #C62828; /* AA text on light */

  /* ---- Neutrals (cool slate, aligned to the blue brand) ---- */
  --b3g-neutral-0: #FFFFFF;
  --b3g-neutral-50: #F7F9FB;
  --b3g-neutral-100: #EEF2F6;
  --b3g-neutral-200: #E2E8F0;
  --b3g-neutral-300: #CBD5E1;
  --b3g-neutral-400: #94A3B8;
  --b3g-neutral-500: #64748B;
  --b3g-neutral-600: #475569;
  --b3g-neutral-700: #334155;
  --b3g-neutral-800: #1E293B;
  --b3g-neutral-900: #0F172A;

  /* ---- Typography (rem-based — WCAG 1.4.4 reflow; no fixed px font sizes) ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Spacing (rem) ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Density (control height) ---- */
  --control-height-sm: 2rem;
  --control-height-md: 2.5rem;
  --control-height-lg: 3rem;

  /* ---- Focus ring ---- */
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.125rem;

  /* ---- Motion (FND-5) — durées et courbes SÉPARÉES : un composant compose
     une durée et une courbe (voir alias --transition-* ci-dessous). Les alias
     restent pour les sites d'appel en place. Tout est neutralisé en bloc par le
     garde-fou prefers-reduced-motion CENTRAL (reset.css) — jamais redéclaré. */
  --duration-instant: 80ms;     /* bascule d'état, pression (FND-6) */
  --duration-fast: 150ms;       /* hover, focus */
  --duration-base: 250ms;       /* popover, disclosure, changement d'onglet */
  --duration-slow: 350ms;       /* drawer, feuille latérale (SidePanel) */
  --duration-deliberate: 500ms; /* entrée de toast, transition de page */
  --duration-ambient: 1400ms;   /* boucles décoratives (shimmer de Skeleton) */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-emphasis: cubic-bezier(0.3, 0, 0.2, 1.4);

  /* Alias composés — compatibilité avec les `transition:` en place. */
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-decelerate);

  /* ---- Retour de pression (FND-6) ---- */
  --press-scale: 0.97;          /* micro-enfoncement des boutons pleins */
  --press-scale-icon: 0.92;     /* les boutons-icône, plus petits, en font plus */
  --press-darken: 8%;           /* mélange vers le noir sur les surfaces pleines */

  /* ---- Layout ---- */
  --layout-sidebar-width: 16rem;
  --layout-topbar-height: 3.5rem;

  /* ---- Élévation (z-index) — échelle UNIQUE, par intention (FND-2).
     Paliers de 100 : on insère une couche sans renuméroter. Toute valeur
     numérique de z-index hors de cette liste est un bug (contrôlé en CI). ---- */
  --z-base: 0;            /* flux normal                                     */
  --z-raised: 100;        /* thead sticky, cellule figée, substrat de boot   */
  --z-sticky: 200;        /* topbar / barres d'action collantes (BulkActionBar) */
  --z-dropdown: 300;      /* row-menu, popovers ancrés, combobox             */
  --z-flyout: 400;        /* ProfileFlyout, panneaux ancrés au shell         */
  --z-drawer-scrim: 500;  /* voile du drawer                                 */
  --z-drawer: 510;        /* panneau off-canvas                              */
  --z-modal-scrim: 600;   /* voile de dialogue (non natif)                   */
  --z-modal: 610;         /* dialogue (non natif)                            */
  --z-toast: 700;         /* notifications transitoires (ToastHost)          */
  --z-tooltip: 800;       /* tooltips, au-dessus de tout contenu             */
  --z-skip-link: 900;     /* TOUJOURS au sommet : l'évasion clavier          */
}

/* ════════════════════════════════════════════════════════════════════════════
   ALIAS LAYER (FND-1) — noms historiques rencontrés dans les .razor.css.
   Objectif : rendre l'existant VALIDE sans réécrire 20 pages. Cette couche est
   FIGÉE : aucun NOUVEAU composant ne doit s'appuyer sur ces alias. Le script
   `verify-css-tokens.ps1` refuse tout token inconnu ; cette liste ne grandit pas.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* — Typographie : échelle numérique héritée → échelle nommée — */
  --text-md: var(--text-base);
  --font-size-sm: var(--text-sm);
  --font-size-md: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-weight-normal: var(--font-weight-regular);
  --line-height-snug: var(--leading-tight);

  /* — Espacements : échelle numérique héritée (base 4) → tokens nommés — */
  --space-1: var(--space-2xs);   /* 0.25rem */
  --space-2: var(--space-xs);    /* 0.5rem  */
  --space-3: var(--space-sm);    /* 0.75rem */
  --space-4: var(--space-md);    /* 1rem    */
  --space-6: var(--space-lg);    /* 1.5rem  */
  --space-8: var(--space-xl);    /* 2rem    */

  /* — Structure et mouvement (consommés par ToastHost, ConfirmDialog, AsyncSection) — */
  --border-width: 1px;
  --border-width-strong: 2px;
  --motion-fast: 150ms;
  --motion-normal: 220ms;
  --motion-base: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}