/* ============================================
   TOKENS.CSS — Design tokens 3-layer (Chantier 1 — Passe 1)
   Charge sur : toutes les pages, en premier dans la cascade.
   Cf. docs/chantiers/01-research.md §7 + 01-audit.md décisions arrêtées.
   ============================================

   Architecture :
   ┌─ Layer 1 : Base / Primitive — valeurs brutes, jamais sémantique.
   ├─ Layer 2 : Semantic — assigne un rôle à une primitive.
   └─ Layer 3 : Component — overrides scoped composant (déclarés ailleurs).

   Règles strictes :
   - Toutes les couleurs en oklch() (sauf legacy compat).
   - Variantes hover/tints/shades via color-mix(in oklch, ...).
   - Easings perso obligatoires, `ease` natif INTERDIT.
   - Durations tokenisées (4 paliers).
   - Border-radius : 0 partout (cf. read-first/eclat_m_layout_grid.html).
   ============================================ */

:root {
  color-scheme: light;

  /* ╔══════════════════════════════════════════════
     ║ LAYER 1 — BASE / PRIMITIVE
     ╚══════════════════════════════════════════════ */

  /* ── Palette brute (oklch perceptuellement uniforme) ──
     Layer 1 = NE PAS utiliser directement dans le code composant. Toujours
     passer par les tokens semantic L2 plus bas.
     Ajustements Chantier 2 (Passe A11Y-5) : ivoire-400/500, teal-200,
     rose-400/500 recalibres pour passer WCAG 2.2 AA contraste 4.5:1 body. */

  /* Ivoire / sable (neutres chauds, chroma ≤ 0.014 — tinté chaud subtil) */
  --ivoire-25:  oklch(98% 0.004 78);
  --ivoire-50:  oklch(96% 0.006 80);   /* ≈ #faf7f3 — bg principal */
  --ivoire-100: oklch(93% 0.010 82);   /* ≈ #f0ebe4 — bg alt */
  --ivoire-200: oklch(86% 0.014 82);   /* ≈ #dcd2c3 — bg dark sable */
  --ivoire-300: oklch(78% 0.014 82);
  --ivoire-400: oklch(56% 0.012 80);   /* text muted/captions — passe AA 4.5:1 body sur ivoire-50 (avant 67% = 2.2:1 echec) */
  --ivoire-500: oklch(46% 0.010 80);   /* text secondary (lead) — passe AA 4.5:1 body (avant 54% = 3.4:1 echec) */
  --ivoire-700: oklch(38% 0.008 78);
  --ivoire-900: oklch(22% 0.006 78);   /* ≈ #2b2926 — text encre */

  /* Teal (primary — brand vert sourd Normandie/Aman-like) */
  --teal-100: oklch(92% 0.012 195);
  --teal-300: oklch(73% 0.030 195);
  --teal-500: oklch(56% 0.045 197);
  --teal-600: oklch(48% 0.048 197);   /* ≈ #2a6b6b — primary */
  --teal-700: oklch(40% 0.048 198);
  --teal-800: oklch(34% 0.045 200);   /* ≈ #1d4e4e — primary dark */
  --teal-200-on-dark: oklch(80% 0.022 195); /* text on teal-800 — passe AA 4.5:1 (avant 76% = 4.2:1 echec marginal) */

  /* Rose (accent — touche éditoriale rare) */
  --rose-200: oklch(82% 0.040 15);    /* ≈ #c4919b — accent light décoratif */
  --rose-400: oklch(50% 0.075 15);    /* accent UI/large text — passe AA UI 3:1 + large text 3:1 (avant 60% = 2.6:1 echec) */
  --rose-500: oklch(44% 0.080 15);    /* accent body texte/hover — passe AA body 4.4:1 (avant 53% = 3.3:1 echec) */

  /* Greyscale brut (rares usages purs) */
  --white:    oklch(100% 0 0);
  --black:    oklch(0% 0 0);

  /* ── Spacing scale (base 8, ratio géométrique progressif) ── */
  --space-0:    0;
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-base: 32px;
  --space-lg:   48px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  120px;
  --space-4xl:  160px;

  /* ── Typographic scale (Major Third 1.250 corps, Golden 1.618 hero) ── */
  /* Body scale (Major Third) — base 1rem (16px) */
  --text-2xs:   clamp(0.75rem,  0.71rem + 0.20vw, 0.8125rem);   /* ~12-13px */
  --text-xs:    clamp(0.8125rem, 0.78rem + 0.20vw, 0.875rem);   /* ~13-14px */
  --text-sm:    clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);   /* ~14-15px */
  --text-base:  clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);   /* ~16-17px */
  --text-md:    clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);     /* ~18-20px */
  --text-lg:    clamp(1.25rem,  1.17rem + 0.40vw, 1.4375rem);   /* ~20-23px */
  --text-xl:    clamp(1.5rem,   1.36rem + 0.69vw, 1.875rem);    /* ~24-30px */
  --text-2xl:   clamp(1.875rem, 1.65rem + 1.13vw, 2.5rem);      /* ~30-40px */
  --text-3xl:   clamp(2.25rem,  1.91rem + 1.69vw, 3.125rem);    /* ~36-50px */
  --text-4xl:   clamp(2.75rem,  2.27rem + 2.38vw, 3.90625rem);  /* ~44-62px */

  /* Display scale (Golden 1.618) — hero pages vitrine UNIQUEMENT */
  --text-display-sm:  clamp(2.5rem,  2.05rem + 2.27vw, 3.75rem);   /* ~40-60px */
  --text-display-md:  clamp(3rem,    2.39rem + 3.03vw, 4.5rem);    /* ~48-72px */
  --text-display-lg:  clamp(3.75rem, 2.84rem + 4.55vw, 6rem);      /* ~60-96px */
  --text-display-xl:  clamp(4.5rem,  3.21rem + 6.44vw, 8rem);      /* ~72-128px */

  /* Line-heights */
  --leading-tight:  1.1;   /* hero display */
  --leading-snug:   1.2;   /* H2 */
  --leading-normal: 1.4;   /* H3, lead */
  --leading-relaxed: 1.65; /* body */
  --leading-loose:  1.75;  /* paragraphes long-form */

  /* Letter-spacings */
  --tracking-tightest: -0.02em; /* display luxe serré */
  --tracking-tighter:  -0.01em; /* H1 */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;  /* btn, ui labels */
  --tracking-wider:    0.08em;  /* nav links */
  --tracking-widest:   0.15em;  /* overline */

  /* Familles font.
     Chantier 3 PERF-3 : fallbacks metric-adjusted "Cormorant Fallback" / "Hanken Fallback"
     defines dans cormorant-garamond.css / hanken-grotesk.css (size-adjust + ascent-override
     + descent-override + line-gap-override). Reduisent le CLS au moment du swap. */
  --font-serif:   'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Font weights (variable font Hanken Grotesk: 100-900) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Font features */
  --font-features-serif: "kern", "liga", "dlig", "calt", "onum";
  --font-features-sans:  "kern", "liga", "calt", "ss01";

  /* ── Durations (4 paliers seulement) ── */
  --duration-instant: 100ms;   /* feedback tactile (hover, focus, toggle) */
  --duration-swift:   240ms;   /* transitions UI (open/close menu, accordion) */
  --duration-smooth:  480ms;   /* reveals scroll éditoriaux */
  --duration-grand:   960ms;   /* hero entrances, cross-document transitions */

  /* ── Easings perso (BANNIR `ease` natif et `linear`) ── */
  --ease-editorial:  cubic-bezier(0.22, 0.61, 0.36, 1);  /* out-quart — signature */
  --ease-deliberate: cubic-bezier(0.65, 0, 0.35, 1);     /* in-out fluide */
  --ease-entrance:   cubic-bezier(0.16, 1, 0.3, 1);      /* expo out — reveals */
  --ease-exit:       cubic-bezier(0.7, 0, 0.84, 0);      /* expo in — sorties */

  /* ── Border-radius (0 partout selon DA) ── */
  --radius-none:  0;
  --radius-pill:  9999px;  /* ne s'utilise QUE sur composants éditoriaux explicites (dot indicateur), JAMAIS cards/inputs */

  /* ── Borders (lignes éditoriales fines) ── */
  --border-fine: 0.5px;
  --border-base: 1px;
  --border-bold: 2px;

  /* ── Shadows (luxe = pas d'ombre, ou ombre quasi invisible) ── */
  --shadow-none:    none;
  --shadow-edition: 0 1px 0 0 oklch(0% 0 0 / 0.04), 0 4px 12px oklch(0% 0 0 / 0.04);
  --shadow-lift:    0 1px 0 0 oklch(0% 0 0 / 0.06), 0 8px 24px oklch(0% 0 0 / 0.06);

  /* ── Z-index scale ── */
  --z-below:     -1;
  --z-base:      1;
  --z-cards:     10;
  --z-sticky:    50;
  --z-nav:       100;
  --z-popover:   150;
  --z-overlay:   200;
  --z-splash:    300;

  /* ── Container & layout ── */
  --container-max:        1200px;  /* container vitrine + hub + landing */
  --container-wide:       1400px;  /* footer only — à supprimer en passe 3 */
  --container-text:       640px;   /* texte courant max */
  --container-text-narrow: 560px;  /* H1 / quote signature */
  --container-padding:    clamp(24px, 5vw, 80px);

  /* ── Aspect ratios photo (DA) ── */
  --aspect-portrait:    4 / 5;
  --aspect-landscape:   3 / 2;
  --aspect-cinema:      16 / 9;
  --aspect-square:      1 / 1;  /* INTERDIT hero — autorisé thumbnail uniquement */

  /* ── Navigation ── */
  --nav-height:   60px;
  --nav-height-scrolled: 75px;
  --logo-link-gap: clamp(60px, 6vw, 100px);


  /* ╔══════════════════════════════════════════════
     ║ LAYER 2 — SEMANTIC (rôle = primitive)
     ╚══════════════════════════════════════════════ */

  /* ── Surfaces ── */
  --surface-default:   var(--ivoire-50);    /* bg principal du site */
  --surface-alt:       var(--ivoire-100);   /* sable — sections alternées */
  --surface-elevated:  var(--white);        /* cards, dialogs */
  --surface-deep:      var(--ivoire-900);   /* footer + ponctuation */
  --surface-brand:     var(--teal-800);     /* signature CTA + bascule sombre */
  --surface-overlay:   color-mix(in oklch, var(--teal-800) 60%, transparent);

  /* ── Texte ── */
  --text-primary:      var(--ivoire-900);   /* corps */
  --text-secondary:    var(--ivoire-500);   /* lead, body secondaire */
  --text-tertiary:     var(--ivoire-400);   /* muted, captions */
  --text-on-deep:      var(--ivoire-50);    /* sur fond foncé */
  --text-on-brand:     var(--ivoire-50);    /* sur teal */
  --text-on-brand-soft: var(--teal-200-on-dark); /* sur teal — secondary */
  --text-brand:        var(--teal-700);     /* liens, accents typographiques */
  --text-brand-strong: var(--teal-800);
  /* Accents rose — discipline d'usage :
     - --text-accent (rose-400, 50%) : UI/large text/decoratif uniquement (ratio 3.6:1 sur surface-default).
     - --text-accent-strong (rose-500, 44%) : body texte si necessaire (ratio 4.4:1 ≈ AA body). */
  --text-accent:       var(--rose-400);     /* accent UI/large text — 3.6:1 sur ivoire-50 */
  --text-accent-strong: var(--rose-500);    /* accent body texte — 4.4:1 sur ivoire-50 (AA quasi-strict) */

  /* ── Borders & lines ── */
  --border-subtle:     color-mix(in oklch, var(--ivoire-900) 8%, transparent);
  --border-default:    color-mix(in oklch, var(--ivoire-900) 16%, transparent);
  --border-strong:     var(--ivoire-900);
  --border-on-deep:    color-mix(in oklch, var(--ivoire-50) 22%, transparent);

  /* ── Brand actions ── */
  --action-primary:        var(--teal-600);
  --action-primary-hover:  var(--teal-800);
  --action-primary-text:   var(--ivoire-50);

  --action-secondary:      transparent;
  --action-secondary-border: var(--teal-600);
  --action-secondary-text: var(--teal-600);

  --action-accent:         var(--rose-400);
  --action-accent-hover:   var(--rose-500);

  --action-ghost-on-dark:  transparent;
  --action-ghost-on-dark-border: var(--ivoire-50);
  --action-ghost-on-dark-text: var(--ivoire-50);

  /* ── Selection ── */
  --selection-bg: var(--rose-200);
  --selection-text: var(--ivoire-900);

  /* ── Focus ring ── */
  --focus-ring:        var(--teal-800);
  --focus-ring-offset: var(--surface-default);

  /* ── Motion sémantique (utiliser ceux-là dans les composants) ── */
  --transition-color:     color var(--duration-instant) var(--ease-editorial);
  --transition-bg:        background-color var(--duration-swift) var(--ease-editorial);
  --transition-border:    border-color var(--duration-instant) var(--ease-editorial);
  --transition-transform: transform var(--duration-swift) var(--ease-editorial);
  --transition-opacity:   opacity var(--duration-swift) var(--ease-editorial);
  --transition-feedback:  color var(--duration-instant) var(--ease-editorial),
                          background-color var(--duration-instant) var(--ease-editorial),
                          border-color var(--duration-instant) var(--ease-editorial);

  /* ── Legacy aliases (compatibilité avant passe 2 — à supprimer après refonte base.css) ──
     Ces aliases permettent au CSS actuel (base.css, components.css, …) de continuer à fonctionner
     pendant que les passes 2-7 les remplacent un par un par leurs équivalents tokenisés. */
  --em-primary:        var(--action-primary);
  --em-primary-dark:   var(--action-primary-hover);
  --em-accent:         var(--action-accent);
  --em-accent-aa:      var(--action-accent-hover);
  --em-accent-light:   var(--rose-200);
  --em-bg:             var(--surface-default);
  --em-bg-alt:         var(--surface-alt);
  --em-bg-dark:        var(--ivoire-200);
  --em-text:           var(--text-primary);
  --em-text-light:     var(--text-secondary);
  --em-text-muted:     var(--text-tertiary);
  --em-text-on-teal:   var(--text-on-brand-soft);

  --ease-reveal:       var(--ease-editorial);
  --duration-reveal:   var(--duration-smooth);
  --stagger-delay:     120ms;

  /* Anciens tokens typo (mappés sur le nouveau scale, comportement préservé) */
  --t-display:    var(--text-3xl);
  --t-punch:      var(--text-2xl);
  --t-heading:    var(--text-xl);
  --t-subheading: var(--text-md);
  --t-lead:       var(--text-md);
  --t-body:       var(--text-base);
  --t-body-sm:    var(--text-sm);  /* corps secondaire lisible (14-15px) — était un token fantôme consommé via fallback */
  --t-small:      var(--text-xs);
  --t-ui:         var(--text-sm);

  /* Anciens z-index aliases */
  --z-background: var(--z-below);
  --z-default:    var(--z-base);
}

/* Responsive token overrides — réduction des paliers monumentaux en mobile/tablet */
@media (max-width: 1024px) {
  :root {
    --space-2xl:  64px;
    --space-3xl:  80px;
    --space-4xl:  112px;
  }
}

@media (max-width: 767px) {
  :root {
    --container-padding: clamp(16px, 5vw, 32px);
  }
}

/* Reduced-data : on désactive les fonts variables additionnelles, on garde le minimum. */
@media (prefers-reduced-data: reduce) {
  :root {
    /* Si besoin futur : désactiver hero parallax + scroll-driven via data-* attribute lu par JS */
  }
}

/* @property pour custom props animables (transition fluide entre sections / scroll-driven) */
@property --bg-section-current {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(96% 0.006 80);
}

@property --accent-current {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(48% 0.048 197);  /* teal-600 — primary action */
}