/*
 * tokens.css — Design tokens EKI®
 * Source de vérité couleurs/typo/espacements partagée entre :
 *   - site web (ici)
 *   - PDF QuestPDF (via EkiBranding côté C#)
 *   - emails transactionnels
 *   - plaquette commerciale + catalogue tarifaire
 *
 * Couleur de marque : rouge vermillon RAL 2002 (#CB2821),
 * identique à la finition thermolaquée des tables EKI® physiques.
 *
 * Dark mode : par défaut on respecte `prefers-color-scheme` via la fonction CSS
 * `light-dark()` (Chromium 123+, Firefox 121+, Safari 17.5+). Le sélecteur du pied
 * de page (Auto / Clair / Sombre) force light ou dark via `<html data-theme="…">`
 * (cf. wwwroot/js/theme-toggle.js). Sans attribut data-theme (état "auto"), le
 * comportement système est préservé.
 * Cf. docs/design-guidelines.md §6 (rouge dark validé : oklch(62% 0.19 26)).
 */

:root {
  /* Permet à light-dark() de fonctionner ET annonce au navigateur que la page
     supporte les deux modes (cookies, scrollbars natives, etc. s'adaptent). */
  color-scheme: light dark;

  /* === Couleurs marque (immuables, identiques light et dark) === */
  --eki-red: #CB2821;                                     /* RAL 2002, identité visuelle physique */
  --eki-red-dark: #9F1D1A;
  --eki-red-light: #E94B3F;

  /* === Grays primitifs (rarement utilisés directement — préférer les sémantiques) === */
  --eki-black: #1a1a1a;
  --eki-gray-900: light-dark(#2a2a2a, #e2e2e2);
  --eki-gray-700: light-dark(#555555, #9b9ba0);
  --eki-gray-500: light-dark(#888888, #6e6e74);
  --eki-gray-300: light-dark(#cccccc, #3a3a3e);
  --eki-gray-200: light-dark(#e2e2e2, #28282b);
  --eki-gray-100: light-dark(#f5f5f5, #161618);
  --eki-white: #ffffff;

  /* === Surfaces sémantiques (s'adaptent au mode) === */
  --eki-bg:         light-dark(#ffffff, #0d0d0e);
  --eki-bg-alt:     light-dark(#f5f5f5, #161618);
  --eki-bg-elev:    light-dark(#ffffff, #1c1c1f);          /* cards, dialog, popover */
  --eki-text:       light-dark(#1a1a1a, #f0f0f1);
  --eki-text-muted: light-dark(#555555, #9b9ba0);
  --eki-border:     light-dark(#cccccc, #28282b);

  /* === Surface "inversée" : zones marketing volontairement contrastées (topbar,
     trust bar). Couleurs FIXES, ne suivent pas le thème. Permettent de garder un
     bandeau sombre identifiable même en dark mode. === */
  --eki-inverse-bg:        #1a1a1a;
  --eki-inverse-bg-elev:   #242427;
  --eki-inverse-fg:        rgba(255, 255, 255, 0.92);
  --eki-inverse-fg-muted:  rgba(255, 255, 255, 0.65);
  --eki-inverse-border:    rgba(255, 255, 255, 0.12);

  /* === Accents UI dérivés (s'adaptent au mode) ===
     En OKLCH (perceptuellement uniforme), on monte la luminosité L de 54% → 62%
     en dark pour éviter la vibration sur fond sombre. Hue 26° reste constant. */
  --eki-accent:        light-dark(#CB2821, oklch(62% 0.19 26));
  --eki-accent-strong: light-dark(#9F1D1A, oklch(68% 0.17 26));

  /* === Status (montés en luminosité pour dark) === */
  --eki-success: light-dark(#2e7d32, #4caf50);
  --eki-warning: light-dark(#ed6c02, #ffa726);
  --eki-error:   light-dark(#c62828, #ef5350);
  --eki-info:    light-dark(#0277bd, #29b6f6);

  /* === Badges d'état (fond + texte) : un seul jeu pour l'admin et l'espace client, lisible en dark ===
     Les couples étaient recopiés en hexadécimal dans chaque feuille, et restaient clairs en mode sombre. */
  --eki-badge-warn-bg:     light-dark(#fef3c7, #3a2a05);
  --eki-badge-warn-fg:     light-dark(#92400e, #fcd34d);
  --eki-badge-ok-bg:       light-dark(#d1fae5, #0f2e1b);
  --eki-badge-ok-fg:       light-dark(#065f46, #86efac);
  --eki-badge-danger-bg:   light-dark(#fee2e2, #3b1212);
  --eki-badge-danger-fg:   light-dark(#991b1b, #fca5a5);
  --eki-badge-info-bg:     light-dark(#dbeafe, #10233f);
  --eki-badge-info-fg:     light-dark(#1e3a8a, #93c5fd);
  --eki-badge-viewed-bg:   light-dark(#e0f2fe, #0c2a3a);
  --eki-badge-viewed-fg:   light-dark(#075985, #7dd3fc);
  --eki-badge-neutral-bg:  light-dark(#e5e7eb, #2a2d33);
  --eki-badge-neutral-fg:  light-dark(#111827, #e5e7eb);
  --eki-badge-muted-bg:    light-dark(#f3f4f6, #24272c);
  --eki-badge-muted-fg:    light-dark(#6b7280, #9ca3af);
  --eki-badge-origin-bg:   light-dark(#ddd6fe, #2a1f4a);
  --eki-badge-origin-fg:   light-dark(#5b21b6, #c4b5fd);

  /* === Typographie === */
  --eki-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --eki-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --eki-font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;

  /* Échelle modulaire 1.25 (Major Third) */
  --eki-fs-xs: 0.75rem;
  --eki-fs-sm: 0.875rem;
  --eki-fs-base: 1rem;
  --eki-fs-lg: 1.125rem;
  --eki-fs-xl: 1.5rem;
  --eki-fs-2xl: 2rem;
  --eki-fs-3xl: 3rem;
  --eki-fs-4xl: 4.5rem;

  --eki-lh-tight: 1.1;
  --eki-lh-normal: 1.5;
  --eki-lh-loose: 1.75;

  /* === Espacements (échelle 4px, alignée Tailwind) === */
  --eki-space-1:  0.25rem; /*  4px */
  --eki-space-2:  0.5rem;  /*  8px */
  --eki-space-3:  0.75rem; /* 12px */
  --eki-space-4:  1rem;    /* 16px */
  --eki-space-5:  1.25rem; /* 20px */
  --eki-space-6:  1.5rem;  /* 24px */
  --eki-space-7:  1.75rem; /* 28px */
  --eki-space-8:  2rem;    /* 32px */
  --eki-space-9:  2.25rem; /* 36px */
  --eki-space-10: 2.5rem;  /* 40px */
  --eki-space-12: 3rem;    /* 48px */
  --eki-space-16: 4rem;    /* 64px */
  --eki-space-24: 6rem;    /* 96px */

  /* === Bordures et coins === */
  --eki-radius-sm: 4px;
  --eki-radius-md: 8px;

  /* Format des images produit : celui des rendus eki-gen (3:2). Tous les encarts le partagent, et
     l'image y est contenue (object-fit: contain) : rien ne dépasse ni n'est rogné, et passer d'une
     vue à l'autre ne fait pas sauter la mise en page. */
  --eki-product-image-ratio: 3 / 2;
  --eki-radius-lg: 16px;

  /* === Ombres === */
  --eki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --eki-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --eki-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

  /* === Transitions === */
  --eki-transition-fast: 100ms ease;
  --eki-transition: 200ms ease;
  --eki-transition-slow: 400ms ease;

  /* === Layout === */
  --eki-container-max: 1280px;
  --eki-content-max: 720px;
  /* Hauteur du bandeau collant AU REPOS (barre de contact 3rem + navigation ~4rem). Il se compacte
     au défilement, donc tout élément qui se cale dessus — sommaire fixé, marge d'ancre — doit
     prendre cette valeur haute : le reste du temps il gagne de l'air, alors qu'une valeur basse le
     ferait passer sous la barre tant qu'elle n'est pas réduite. */
  --eki-header-height: 7rem;
  /* Hauteur du même bandeau une fois COMPACTÉ (la barre de contact se replie au défilement).
     C'est la valeur à utiliser pour ce qui ne s'affiche qu'après avoir défilé. */
  --eki-header-height-compact: 4rem;
}

/* === Override du mode via le sélecteur du pied de page (cf. theme-toggle.js) ===
   Sans data-theme : color-scheme:"light dark" actif → light-dark() suit
   prefers-color-scheme. Avec data-theme : on force un mode. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;  }