/* ============================================================================
   tokens.css — Source unique de verite des jetons de design Innled v1.19.3
   ----------------------------------------------------------------------------
   Toutes les couleurs, typographies, espacements, rayons et ombres de la charte
   "innled" sont declares ici une seule fois. Aucune valeur hex/px en dur ne doit
   etre repetee dans les composants : ils referencent ces variables.
   Valeurs issues du handoff design (README §2) — fidelite haute (hi-fi).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Police icones Material Symbols Rounded — hebergee localement (pas de dep
   externe Google Fonts, fonctionne en intranet isole).
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/static/fonts/MaterialSymbolsRounded.woff2') format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

:root {
  /* ----- Couleurs marque : navy (degrade sidebar, hero, headers) ----- */
  --navy-900: #06182f; /* bas du degrade sidebar, header public */
  --navy-800: #0a1f3a; /* barre d'outils, encoche mobile */
  --navy-700: #0c2545; /* haut du degrade sidebar, hero login */
  --navy-600: #13294a; /* titres secondaires */

  /* ----- Texte ----- */
  --ink: #0e2545;        /* titres principaux / texte fort */
  --text: #27384d;       /* texte courant */
  --text-sub: #46566b;   /* labels KPI, métadonnées numériques */
  --text-muted: #64748b; /* sous-titres, metadonnees */
  --text-muted-2: #8a97a8;
  --text-faint: #9aa6b6; /* placeholders, slugs */

  /* ----- Surfaces ----- */
  --cream: #f4efe3;      /* fond de la zone applicative <main> */
  --cream-bg: #e7e1d4;   /* fond global de page */
  --card: #ffffff;       /* cartes / panneaux */
  --field-bg: #fbfcfe;   /* fond des champs de saisie */
  --border: rgba(7, 27, 59, 0.06);      /* bordures cartes douces */
  --border-strong: rgba(7, 27, 59, 0.12); /* separateurs marques */
  --field-border: #d7dde6;              /* bordures d'inputs */

  /* ----- Couleurs or (accent marque) ----- */
  --gold: #d9a843;
  --gold-light: #e1be70; /* logo, labels */
  --gold-deep: #caa24f;
  --gold-badge-text: #a9772a; /* texte pastille badge or */
  --gold-grad: linear-gradient(180deg, #e9cd85, #cca249); /* bouton or */
  --gold-grad-active: linear-gradient(95deg, #ead08a, #c9a24e); /* nav active */
  --on-gold: #3a2a06;      /* texte pose sur l'or (bouton gold) */
  --nav-active-ink: #1a1205; /* texte nav item actif (degrade or actif) */
  --table-head-grad: linear-gradient(90deg, #f6efde, #f3ecda);
  --table-head-label: #9a7a3a;

  /* ----- Couleurs semantiques (statuts & icones) ----- */
  --ok-icon: #1f9d6b;    /* vert : OK / en stock / publie (icone) */
  --ok-text: #0b7a46;    /* vert : texte / chip */
  --ok-dark: #065f46;    /* vert tres fonce : texte alerte succes */
  --ok-pale: #d1fae5;    /* texte pale sur fond vert (alerte succes) */
  --alert-ok-bg: #e8f5ee;     /* fond alerte succes (heritage) */
  --alert-ok-bg-2: #dcfce7;   /* fond badge succes (heritage) */
  --alert-ok-border: #b9dec9; /* bordure alerte succes */
  --alert-ok-text: #145c39;   /* texte alerte succes */
  --alert-ok-text-2: #166534; /* texte badge succes */
  --alert-warn-bg: #fff4de;   /* fond alerte warning */
  --alert-warn-border: #f2d6a6; /* bordure alerte warning */
  --alert-warn-text: #7a430f; /* texte alerte warning */
  --alert-err-bg: #fff8f7;    /* fond alerte erreur douce */
  --alert-err-border: #ffc9c1; /* bordure alerte erreur */
  --warn-dark: #92400e;  /* texte ambre fonce (alerte warn) */
  --danger-dark: #991b1b;  /* rouge tres fonce : texte alerte erreur */
  --danger-pale: #fee2e2;  /* fond rouge pale (badge bloquant) */
  --danger-faint: #fff1f2; /* fond rouge tres pale (ligne alerte table) */
  --info: #2563eb;       /* bleu : expedie / info / admin */
  --info-pale: #e0f2fe;  /* fond bleu pale (badge non bloquant) */
  --info-dark: #075985;  /* texte bleu fonce (badge non bloquant) */
  --info-2: #2f74c0;
  --warn: #bd7d1f;       /* or : fin fab / a controler / brouillon */
  --danger: #dc2626;     /* rouge : non conforme / erreur / corbeille */
  --danger-2: #dc4646;
  --orange: #e8843a;     /* SAV / non affecte / referentiel */
  --violet: #7c5cd0;     /* non affecte / utilisateurs */
  --teal: #16a39c;       /* personnalisation / CMS intranet */
  --neutral: #5b6b7a;    /* gris neutre */

  /* ----- Toggle (interrupteur 46x26) ----- */
  --toggle-on: linear-gradient(180deg, #1aa563, #0b7a46);
  --toggle-off: #cfd8e3;

  /* ----- Typographie ----- */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Echelle (taille desktop ; cf. --fs-*-m pour mobile) */
  --fs-h1: 30px;     --fs-h1-m: 24px;
  --fs-hero: clamp(26px, 4vw, 44px);
  --fs-card-title: 18px;
  --fs-body: 15px;   --fs-body-m: 16px; /* mobile >=16px : evite le zoom iOS */
  --fs-label: 12px;  /* labels de section UPPERCASE */
  --fs-meta: 13px;
  --fs-chip: 12px;
  --ls-tight: -0.02em;
  --ls-logo: -0.04em;
  --ls-label: 0.12em;

  /* ----- Rayons ----- */
  --r-field: 12px;
  --r-card: 15px;
  --r-panel: 20px;
  --r-frame-mobile: 40px;
  --r-pill: 999px;

  /* ----- Espacements ----- */
  --pad-app: 30px 34px 44px;   /* zone applicative desktop */
  --pad-app-m: 20px 16px;      /* zone applicative mobile */
  --gap-grid: 18px;            /* grilles desktop */
  --gap-grid-m: 11px;          /* grilles mobile */

  /* ----- Ombres ----- */
  --sh-card: 0 14px 30px -26px rgba(7, 27, 59, 0.5);
  --sh-panel: 0 20px 44px -32px rgba(7, 27, 59, 0.5);
  --sh-frame: 0 40px 90px -50px rgba(7, 27, 59, 0.6);
  --sh-gold: 0 14px 26px -14px rgba(202, 162, 79, 0.8);

  /* ----- Cibles tactiles (exigence audit : jamais < 44px) ----- */
  --touch-min: 44px;
  --nav-item-min: 48px;

  /* ----- Transitions ----- */
  --t-fast: all 0.15s ease;
  --t-drawer: 0.2s ease;
  --t-backdrop: 0.18s ease;

  /* ----- Sidebar ----- */
  --sidebar-w: 288px;
  --sidebar-grad: linear-gradient(190deg, #0c2545, #06182f);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-shadow: 20px 0 42px rgba(6, 26, 53, 0.12);
  --on-dark: #ffffff;
  --drawer-w: 322px;

  /* ----- Degrades composes ----- */
  --hero-grad: linear-gradient(120deg, #0c2747, #16487f, #0c2747);
  --btn-blue-grad: linear-gradient(180deg, #2f6fe0, #1b51c4);
  --btn-green-grad: linear-gradient(180deg, #1aa563, #0b7a46);
  --btn-red-grad: linear-gradient(180deg, #e0463f, #c5302a);
  --btn-violet-grad: linear-gradient(180deg, #9d7ee8, #7c5cd0);
  --surface-subtle: #f7f9fc;        /* fond subtil ghost / surfaces tertiaires */
  --surface-subtle-hover: #edf0f5;  /* hover sur surface subtile */
  --login-bg: linear-gradient(150deg, #eef1f6, #dfe4ee);

  /* ----- Palette public product page ----- */
  --pub-border: #d9cdb7;    /* bordure public product (beige chaud) */
  --pub-surface: #fbfaf7;   /* fond clair public product */
  --pub-surface-2: #fffdf8; /* fond tres clair warm public product */
  --pub-ink: #071225;       /* texte fonce / fond fonce public product */
  --pub-navy: #07182b;      /* navy fonce gradient public */
  --pub-navy-mid: #0b2238;  /* navy milieu gradient public */
  --pub-navy-deep: #061322; /* navy profond gradient public */
  --pub-muted: #6f675c;     /* texte discret public product */
  --pub-admin-navy: #0b2d5c; /* navy admin hero gradient */
  --pub-admin-blue: #123f7a; /* bleu admin hero gradient */
  --pub-admin-blue-dark: #123f7d; /* bleu admin hero (variante) */
  --pub-bg: #ebe7df;        /* fond page public product */
  --pub-surface-soft: #f7f4ee; /* fond surface douce public */
  --pub-surface-warm: #f6f1e7; /* fond warm media public */
  --pub-surface-3: #f3f0e9; /* fond variante public */
  --pub-surface-4: #faf8f2; /* fond product sheet */
  --pub-surface-5: #f7f4ec; /* fond page level public */
  --pub-text: #111827;      /* texte courant public (Tailwind gray-900) */
  --pub-line: #ded6c9;      /* separateurs public product */
  --pub-brand: #a89472;     /* couleur marque public (tan/or) */
  --pub-green: #1f7a4d;     /* vert public product */
  --pub-orange-2: #b76632;  /* orange public product */
  --pub-danger: #b42318;    /* rouge danger public (Tailwind red-700) */
  --pub-sav-bg: #fff4e8;    /* fond panneau SAV */
  --pub-sav-text: #7a3212;  /* texte titre SAV */
  --pub-sav-sub: #8a5a3a;   /* sous-texte SAV */
  --pub-sav-btn: #b75a22;   /* bouton SAV */
  --pub-black: #000000;     /* noir pur (overlay video) */
  --pub-focus-text: #0b1628; /* texte tres fonce public focus */
  --pub-link-text: #263852;  /* couleur lien interne public */
  --gold-hover: #aa9673;    /* hover bouton or / lien decoration */
  --gold-warm: #eac27a;     /* or chaud (product kicker, hover) */

  /* ----- UI generique (heritage legacy) ----- */
  --label-text: #374151;    /* couleur label formulaire (Tailwind gray-700) */
  --border-light: #e5e7eb;  /* bordure legere tableau (Tailwind gray-200) */
  --badge-bg: #edf0f3;      /* fond badge generique */
  --badge-text: #263244;    /* texte badge generique */
  --th-bg: #9f8d6d;         /* fond en-tete tableau legacy */
  --qc-border: #e5ded3;     /* bordure qc-flow-guide */
  --qc-text-sub: #4f5a52;   /* texte secondaire qc-flow */
  --qc-text-dark: #22304a;  /* texte fonce qc-flow */
  --danger-deep: #b42318;   /* rouge fonce (Tailwind red-700) */
  --icon-bg-warm: #f2eee6;  /* fond icon circulaire warm */
  --btn-sec-hover: #fffaf1; /* fond btn secondaire au hover */
  --badge-border: #ddd4c8;  /* bordure badge legacy */
  --badge-bg-legacy: #ede8df; /* fond badge legacy */
  --badge-color: #5d5a52;   /* texte badge legacy */
  --th-legacy-bg: #ac9a7b;  /* fond th legacy */
  --td-border: #e4ddd2;     /* bordure td legacy */
  --row-hover: #fff8eb;     /* fond ligne tableau au hover */

  /* ----- Interface admin ----- */
  --admin-surface: #f2f5fa; /* fond surface admin */
  --admin-surface-2: #fafcff; /* fond surface admin clair */
  --admin-surface-3: #f6f8fc; /* fond workspace admin */
  --admin-link: #164da8;    /* couleur lien admin */
  --admin-green: #087443;   /* vert succes admin */
  --reference-border: #e5eaf2; /* bordure reference-card */
  --input-border-alt: #9ca8ba; /* bordure input alternative */
  --search-bg: #eef4fb;     /* fond bouton recherche public */
  --orange-text: #a35314;   /* texte orange-brun */

  /* ----- Gradients boutons (heritage) ----- */
  --btn-blue-1: #1463e8;    /* gradient bouton bleu start */
  --btn-blue-2: #0b3b85;    /* gradient bouton bleu end */
  --btn-green-1: #23c980;   /* gradient bouton vert start */
  --btn-green-2: #13864f;   /* gradient bouton vert end */
  --btn-red-1: #ea3f47;     /* gradient bouton rouge start */
  --btn-red-2: #c5161d;     /* gradient bouton rouge end */
  --btn-violet-1: #7c5cfc;  /* gradient bouton violet start */
  --btn-violet-2: #4b2fb0;  /* gradient bouton violet end */
  --gold-btn-dark: #a8792b; /* gradient bouton or (fin) */

  /* ----- Login page ----- */
  --login-nav-1: #051a36;   /* gradient nav login start */
  --login-nav-2: #08244b;   /* gradient nav login end */
  --focus-navy-1: #04172f;  /* gradient focus navy start */
  --focus-navy-2: #082c58;  /* gradient focus navy mid */
  --focus-navy-3: #123f7a;  /* gradient focus navy end */
  --focus-navy-4: #061a35;  /* gradient focus navy alt */
  --focus-cream: #f7f9fc;   /* fond clair focus/login (identique --surface-subtle) */
  --focus-cream-2: #eff5ff; /* fond tres clair bleuté focus */

  /* ----- Code / journal bugs ----- */
  --code-bg: #1e1e1e;       /* fond bloc code (VS Code dark) */
  --code-text: #d4d4d4;     /* texte bloc code */
  --bug-row-bg: #fff8f8;    /* fond ligne bug ouvert */

  /* ----- Tokens compat legacy (migration app.css) ----- */
  --blue-innled: #1267d8;        /* bleu primaire INNLED legacy */
  --cream-light: #fbf8f1;        /* crème très clair legacy */
  --gold-extra-dark: #8a6424;    /* or très foncé legacy */
  --ink-dark: #071b3b;           /* texte navy très foncé legacy */
  --ink-mid: #12233d;            /* texte navy foncé legacy */
  --text-soft: #536276;          /* texte mi-ton legacy */
  --text-mid: #6b7a90;           /* texte sous-titres legacy */
  --text-muted-legacy: #7b8797;  /* texte discret alternatif legacy */
  --primary-compat: #2f6fed;     /* bleu primaire compat v1.11 */
  --surface-pale: #f9fbfe;       /* fond très clair compat */
  --surface-flat: #f3f7fc;       /* fond surface plate legacy */
  --border-compat: #dde6f1;      /* bordure compat (override tokens --border) */
  --danger-soft-compat: #fdecec; /* fond danger soft compat */
  --warn-soft-compat: #fff4db;   /* fond warning soft compat */
  --bg-warm: #f6f3ec;            /* fond warm legacy (proche --cream) */
}

/* ===========================================================================
   THÈME SOMBRE (v2.20.0)
   Activé par <html data-theme="dark"> (theme-init.js, mémorisé en localStorage).
   On ne réécrit que les jetons de SURFACE / TEXTE / BORDURE : tous les composants
   utilisant var() suivent automatiquement. La sidebar et le bandeau bleu (navy)
   et l'or de marque restent identiques (éléments de charte). Premier jet —
   à affiner page par page si besoin.
   =========================================================================== */
:root[data-theme="dark"] {
  /* Surfaces */
  --cream: #0f1722;        /* fond zone applicative + topbar */
  --cream-bg: #0a121b;
  --card: #16202c;
  --field-bg: #1b2734;
  --surface-subtle: #1b2734;
  --surface-subtle-hover: #223141;
  --surface-pale: #16202c;
  --surface-flat: #1b2734;
  --bg-warm: #16202c;
  --cream-light: #16202c;
  --admin-surface: #131c27;
  --admin-surface-2: #18222e;
  --admin-surface-3: #131c27;
  --row-hover: rgba(217,168,67,.10);
  --icon-bg-warm: #243140;
  --badge-bg: #223141;
  --badge-bg-legacy: #223141;
  --table-head-grad: linear-gradient(90deg, #1c2836, #1a2734);

  /* Bordures */
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.15);
  --field-border: #314050;
  --border-light: rgba(255,255,255,.12);
  --border-compat: rgba(255,255,255,.12);
  --reference-border: rgba(255,255,255,.12);
  --td-border: rgba(255,255,255,.10);
  --badge-border: rgba(255,255,255,.14);

  /* Texte */
  --ink: #eef3f8;
  --ink-dark: #f3f7fb;
  --ink-mid: #dde6f0;
  --text: #c7d2de;
  --text-sub: #b3c0cf;
  --text-soft: #aab8c6;
  --text-mid: #9bacbd;
  --text-muted: #93a3b5;
  --text-muted-2: #7d8ea0;
  --text-muted-legacy: #8295a8;
  --text-faint: #6d8196;
  --label-text: #c7d2de;
  --badge-text: #d4dee9;
  --badge-color: #b9c6d4;

  /* Champs / inputs alternatifs */
  --input-border-alt: #46586b;
  --search-bg: #1b2734;

  /* Or (accents lisibles sur fond sombre) */
  --gold-extra-dark: #e1be70;
  --gold-badge-text: #e6c87f;
  --table-head-label: #d2ac63;

  /* Texte sémantique (sur tuiles/alertes en teintes translucides) */
  --ok-text: #5fd6a0;
  --ok-dark: #6ee7b7;
  --alert-ok-text: #a7f3d0;
  --alert-ok-text-2: #86efac;
  --warn-dark: #fcd34d;
  --alert-warn-text: #fcd34d;
  --danger-dark: #fca5a5;
  --danger-deep: #fca5a5;
  --info-dark: #7dd3fc;
  --orange-text: #f0b27a;
  --admin-link: #7db1ff;

  /* Ombres plus discrètes sur fond sombre */
  --sh-card: 0 14px 30px -26px rgba(0,0,0,.7);
  --sh-panel: 0 20px 44px -32px rgba(0,0,0,.75);
}