/* =====================================================================
   Certynex Design System — TOKENS (Phase 8B)
   Source unique des couleurs, typographies, espacements, rayons, ombres,
   hauteurs, bordures, z-index et durées. Aucun écran ne code ses couleurs :
   il consomme ces variables (exceptions documentées dans DESIGN_TOKENS.md).
   ===================================================================== */
:root{
  /* ---------- Palette primitive : neutres « ardoise marine » ---------- */
  --cx-ink-950:#0A1220; --cx-ink-900:#111B2E; --cx-ink-800:#1B2740; --cx-ink-700:#2B3A54;
  --cx-ink-600:#44536B; --cx-ink-500:#5E6C82; --cx-ink-400:#8592A6; --cx-ink-300:#B5BFCD;
  --cx-ink-200:#D6DCE5; --cx-ink-150:#E3E8EF; --cx-ink-100:#EDF1F5; --cx-ink-50:#F6F8FA; --cx-ink-0:#FFFFFF;
  /* ---------- Marine Certynex (identité) ---------- */
  --cx-navy-950:#081429; --cx-navy-900:#0D1D3A; --cx-navy-800:#142A52; --cx-navy-700:#1F3864;
  --cx-navy-600:#2A4A80; --cx-navy-500:#3B5F9C; --cx-navy-300:#91A9D3; --cx-navy-200:#C3D2EA;
  --cx-navy-100:#E4EBF7; --cx-navy-50:#F2F6FC;
  /* ---------- Accent technologique (sarcelle) — usage parcimonieux ---------- */
  --cx-teal-700:#0B5F64; --cx-teal-600:#0F7A80; --cx-teal-500:#14959B; --cx-teal-200:#B4E2E3; --cx-teal-100:#DDF2F2;
  /* ---------- États ---------- */
  --cx-green-700:#17603F; --cx-green-600:#1E7A52; --cx-green-200:#B6DEC9; --cx-green-100:#E2F3EA;
  --cx-amber-700:#7A4F00; --cx-amber-600:#9A6500; --cx-amber-200:#EDD08E; --cx-amber-100:#FBF1DA;
  --cx-red-700:#9A1C12; --cx-red-600:#B42318; --cx-red-200:#F2BAB2; --cx-red-100:#FDE8E5;
  --cx-blue-700:#174A86; --cx-blue-600:#1F5FAA; --cx-blue-200:#BCD3F0; --cx-blue-100:#E6EFFB;
  --cx-black:#000000; --cx-white:#FFFFFF;
  --cx-scrim:rgba(10,18,32,.56);              /* voile des modales */
  --cx-viseur-voile:rgba(0,0,0,.38);          /* voile autour du cadre de scan */
  --cx-viseur-cadre:rgba(255,255,255,.85);    /* coins du cadre de scan */
  --cx-overlay-fond:rgba(10,18,32,.78);       /* textes et outils posés sur l'image caméra */
  --cx-overlay-outil:rgba(10,18,32,.66);
  --cx-overlay-outil-hover:rgba(10,18,32,.85);
  --cx-overlay-bord:rgba(255,255,255,.3);
  --cx-pastille-claire:rgba(255,255,255,.18);
  --cx-shadow-color:16,27,46;                /* RGB des ombres (teinte marine) */

  /* ---------- Sémantique (consommée par les écrans) ---------- */
  --cx-bg:#F2F4F7;
  --cx-surface:var(--cx-ink-0);
  --cx-surface-elevated:var(--cx-ink-0);
  --cx-surface-sunken:var(--cx-ink-50);
  --cx-surface-hover:#F4F7FB;
  --cx-surface-selected:var(--cx-navy-50);
  --cx-border:var(--cx-ink-200);
  --cx-border-subtle:var(--cx-ink-150);
  --cx-border-strong:var(--cx-ink-300);
  --cx-text:var(--cx-ink-900);
  --cx-text-secondary:var(--cx-ink-600);
  --cx-text-tertiary:var(--cx-ink-500);
  --cx-text-disabled:var(--cx-ink-400);
  --cx-text-inverse:var(--cx-ink-0);
  --cx-primary:var(--cx-navy-700);
  --cx-primary-hover:var(--cx-navy-800);
  --cx-primary-active:var(--cx-navy-900);
  --cx-primary-subtle:var(--cx-navy-100);
  --cx-on-primary:var(--cx-ink-0);
  --cx-accent:var(--cx-teal-600);
  --cx-accent-subtle:var(--cx-teal-100);
  --cx-focus:var(--cx-teal-600);
  --cx-link:var(--cx-navy-600);
  --cx-success:var(--cx-green-600);   --cx-success-text:var(--cx-green-700); --cx-success-bg:var(--cx-green-100); --cx-success-border:var(--cx-green-200);
  --cx-warning:var(--cx-amber-600);   --cx-warning-text:var(--cx-amber-700); --cx-warning-bg:var(--cx-amber-100); --cx-warning-border:var(--cx-amber-200);
  --cx-danger:var(--cx-red-600);      --cx-danger-text:var(--cx-red-700);    --cx-danger-bg:var(--cx-red-100);    --cx-danger-border:var(--cx-red-200);
  --cx-info:var(--cx-blue-600);       --cx-info-text:var(--cx-blue-700);     --cx-info-bg:var(--cx-blue-100);     --cx-info-border:var(--cx-blue-200);
  --cx-neutral:var(--cx-ink-600);     --cx-neutral-text:var(--cx-ink-700);   --cx-neutral-bg:var(--cx-ink-100);   --cx-neutral-border:var(--cx-ink-200);

  /* ---------- Navigation (barre latérale) ---------- */
  --cx-nav-bg:var(--cx-navy-950);
  --cx-nav-bg-raised:var(--cx-navy-900);
  --cx-nav-text:#C5D0E2;
  --cx-nav-text-muted:#8A9BB8;
  --cx-nav-text-active:var(--cx-ink-0);
  --cx-nav-item-hover:rgba(255,255,255,.06);
  --cx-nav-item-active:rgba(255,255,255,.10);
  --cx-nav-indicator:var(--cx-teal-500);
  --cx-nav-border:rgba(255,255,255,.08);
  --cx-violet-500:#7B61FF; --cx-violet-400:#9C88FF; --cx-teal-400:#3FC1C6; --cx-recherche-halo:rgba(123,97,255,.28);
  --cx-nav-ligne:rgba(145,169,211,.28);        /* trait vertical des étapes du menu */
  --cx-nav-pastille:#D9822B;                   /* point « à traiter » dans le menu */
  --cx-search-bg:var(--cx-navy-900); --cx-search-text:#C5D0E2; --cx-search-muted:#8A9BB8;
  --cx-depot-bg:var(--cx-navy-900); --cx-depot-bg2:var(--cx-navy-800); --cx-depot-text:var(--cx-ink-0); --cx-depot-muted:#A9B8D2;

  /* ---------- Graphiques (données existantes uniquement) ---------- */
  --cx-chart-1:var(--cx-navy-700); --cx-chart-2:var(--cx-teal-500); --cx-chart-3:var(--cx-ink-300);
  --cx-chart-4:var(--cx-amber-600); --cx-chart-5:var(--cx-red-600); --cx-chart-track:var(--cx-ink-150);

  /* ---------- Typographie ---------- */
  --cx-font-sans:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --cx-font-display:"Inter","Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --cx-font-mono:"JetBrains Mono","SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --cx-fs-display:30px; --cx-lh-display:1.15; --cx-fw-display:700;
  --cx-fs-h1:24px;      --cx-lh-h1:1.2;       --cx-fw-h1:700;
  --cx-fs-h2:18px;      --cx-lh-h2:1.3;       --cx-fw-h2:650;
  --cx-fs-h3:15px;      --cx-lh-h3:1.35;      --cx-fw-h3:650;
  --cx-fs-body:14px;    --cx-lh-body:1.5;
  --cx-fs-small:13px;   --cx-lh-small:1.45;
  --cx-fs-label:12.5px; --cx-fw-label:600;
  --cx-fs-caption:12px;
  --cx-fs-metric:28px;  --cx-fw-metric:650;
  --cx-fs-metric-lg:34px;
  --cx-fs-mono:13px;
  --cx-tracking-caps:.06em;

  /* ---------- Espacements (grille de 4 px) ---------- */
  --cx-space-0:0; --cx-space-1:4px; --cx-space-2:8px; --cx-space-3:12px; --cx-space-4:16px; --cx-space-5:20px;
  --cx-space-6:24px; --cx-space-7:28px; --cx-space-8:32px; --cx-space-10:40px; --cx-space-12:48px;

  /* ---------- Rayons ---------- */
  --cx-radius-xs:4px; --cx-radius-sm:6px; --cx-radius-md:8px; --cx-radius-lg:12px; --cx-radius-xl:16px; --cx-radius-pill:999px;

  /* ---------- Ombres (teinte marine, discrètes) ---------- */
  --cx-shadow-xs:0 1px 2px rgba(var(--cx-shadow-color),.06);
  --cx-shadow-sm:0 1px 2px rgba(var(--cx-shadow-color),.06),0 1px 3px rgba(var(--cx-shadow-color),.08);
  --cx-shadow-md:0 4px 12px rgba(var(--cx-shadow-color),.08),0 1px 3px rgba(var(--cx-shadow-color),.06);
  --cx-shadow-lg:0 16px 40px rgba(var(--cx-shadow-color),.18),0 2px 8px rgba(var(--cx-shadow-color),.08);
  --cx-shadow-focus:0 0 0 3px var(--cx-teal-200);

  /* ---------- Hauteurs de contrôles ---------- */
  --cx-h-sm:32px; --cx-h-md:40px; --cx-h-lg:48px; --cx-h-xl:56px;
  --cx-h-touch:48px;            /* cible tactile minimale terrain (≥ 44 px) */
  --cx-h-scan:88px;             /* action dominante SCANNER */
  --cx-h-row:44px;              /* ligne de tableau (densité confortable) */

  /* ---------- Bordures ---------- */
  --cx-border-w:1px; --cx-border-w-strong:2px; --cx-focus-w:3px; --cx-indicator-w:3px;

  /* ---------- Z-index ---------- */
  --cx-z-base:0; --cx-z-sticky:10; --cx-z-header:20; --cx-z-nav:30; --cx-z-drawer:40; --cx-z-modal:50; --cx-z-toast:60;

  /* ---------- Mise en page ---------- */
  --cx-sidebar-w:248px; --cx-content-max:1320px; --cx-gutter:28px;

  /* ---------- Mouvement (navigation Certynex validée) ---------- */
  --cx-ease:cubic-bezier(.2,0,0,1);
  --cx-ease-out:cubic-bezier(0,0,.2,1);
  --cx-dur-instant:80ms;
  --cx-dur-fast:120ms;
  --cx-dur-b:200ms;            /* B : fondu enchaîné + 8 px — intra-phase / écran secondaire */
  --cx-dur-c:240ms;            /* C : directionnel — changement de phase / module majeur */
  --cx-shift-b:8px;
  --cx-shift-c:16px;
}

/* ---------- Densités ---------- */
[data-density="compact"]{ --cx-h-row:36px; --cx-h-md:34px; --cx-fs-body:13px; --cx-space-gap:8px; }
[data-density="terrain"]{ --cx-fs-body:16px; --cx-fs-small:14px; --cx-fs-label:14px; --cx-h-md:48px; --cx-h-lg:52px; --cx-h-row:52px; }

/* ---------- Préparation d'un thème sombre (non activé en 8B) ----------
   Seuls les jetons sémantiques changent ; aucun écran n'est à reprendre. */
[data-theme="sombre"]{
  --cx-bg:var(--cx-ink-950); --cx-surface:var(--cx-ink-900); --cx-surface-elevated:var(--cx-ink-800);
  --cx-surface-sunken:var(--cx-ink-950); --cx-surface-hover:var(--cx-ink-800); --cx-border:var(--cx-ink-700);
  --cx-border-subtle:var(--cx-ink-800); --cx-text:var(--cx-ink-50); --cx-text-secondary:var(--cx-ink-300);
  --cx-text-tertiary:var(--cx-ink-400); --cx-primary:var(--cx-navy-300); --cx-on-primary:var(--cx-navy-950);
}