/* ============================================================
   tokens.css — design tokens du site marketing LCC (v5 redesign Awwwards-tier)
   3 thèmes : Main (défaut, light bg + navy elements + gold)
              Dark (canonique, navy partout)
              Light (cream)

   Refonte 2026-05-18 — branche redesign/awwwards-tier :
   - Ajout Plus Jakarta Sans variable (remplace DM Sans pour le body).
   - Cormorant Garamond gardé pour le display.
   - Nouveaux tokens motion (--ease-spring, --ease-haptic).
   - Nouveaux tokens bezel (double-bezel architecture).
   - Échelle type cinématique (display-xl jusqu'à 9.5rem).
   - Ombres ambient diffuses (Soft Structuralism).
   - Section padding plus généreux (Awwwards macro-whitespace).
   ============================================================ */

/* ============================================================
   MAIN THEME (défaut) — light bg + navy elements + gold touches
   ============================================================ */
:root,
[data-theme="main"] {
  /* Surfaces */
  --bg-primary:    #f8f6f2;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #0d1b2a;
  --bg-deep:       #0a1520;            /* navy plus profond pour proof band, manifesto */
  --bg-card:       #0d1b2a;            /* cards = navy tiles on light bg (signature pattern) */
  --bg-card-hover: #1a2d42;
  --bg-card-elevated: #1a2d42;         /* navy "lifted" pour bezel inner */
  --bg-overlay:    rgba(10, 21, 32, 0.92);
  --bg-glass:      rgba(13, 27, 42, 0.78);

  /* Texte */
  --text-primary:  #0d1b2a;
  --text-body:     #1a2d42;
  --text-muted:    #2c4a6e;
  --text-faint:    rgba(44, 74, 110, 0.38);
  --text-on-navy:  #f4f0e8;
  --text-on-navy-mid: #c8d4e0;
  --text-on-navy-dim: #8a9bb0;

  /* Or — accent signature */
  --accent:        #c9a84c;
  --accent-light:  #e8c97a;
  --accent-deep:   #a07828;
  --accent-dim:    rgba(201, 168, 76, 0.10);
  --accent-watermark: rgba(201, 168, 76, 0.28);
  --accent-border: rgba(201, 168, 76, 0.35);
  --accent-glow:   rgba(201, 168, 76, 0.18);

  /* Bordures */
  --border:        rgba(13, 27, 42, 0.08);
  --border-mid:    rgba(13, 27, 42, 0.16);
  --border-strong: rgba(13, 27, 42, 0.42);
  --border-on-navy: rgba(201, 168, 76, 0.14);
  --hairline:      rgba(13, 27, 42, 0.06);    /* hairline 1px ultra-fin */
  --hairline-gold: rgba(201, 168, 76, 0.18);

  /* Lignes décoratives */
  --grid-line:     rgba(13, 27, 42, 0.04);
  --grid-line-on-navy: rgba(201, 168, 76, 0.035);

  /* Ombres — passe en ambient diffus (Soft Structuralism) */
  --shadow-sm:     0 2px 8px rgba(13, 27, 42, 0.05);
  --shadow-md:     0 12px 32px -8px rgba(13, 27, 42, 0.10);
  --shadow-lg:     0 28px 72px -16px rgba(13, 27, 42, 0.18);
  --shadow-xl:     0 48px 120px -24px rgba(13, 27, 42, 0.28);
  --shadow-ambient: 0 32px 80px -20px rgba(13, 27, 42, 0.14);
  --shadow-floating: 0 24px 60px -12px rgba(13, 27, 42, 0.12), 0 8px 16px -4px rgba(13, 27, 42, 0.06);
  --shadow-gold:   0 18px 48px -12px rgba(201, 168, 76, 0.32);
  --shadow-nav:    0 12px 40px -8px rgba(13, 27, 42, 0.18);

  /* Double-Bezel — inset highlights */
  --bezel-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  --bezel-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(13, 27, 42, 0.4);
}

/* ============================================================
   DARK THEME — navy partout
   ============================================================ */
[data-theme="dark"] {
  --bg-primary:    #0d1b2a;
  --bg-secondary:  #1a2d42;
  --bg-tertiary:   #0a1520;
  --bg-deep:       #050d18;
  --bg-card:       #0a1520;
  --bg-card-hover: rgba(44, 74, 110, 0.4);
  --bg-card-elevated: #1a2d42;
  --bg-overlay:    rgba(10, 21, 32, 0.92);
  --bg-glass:      rgba(13, 27, 42, 0.65);

  --text-primary:  #f4f0e8;
  --text-body:     #c8d4e0;
  --text-muted:    #8a9bb0;
  --text-faint:    rgba(138, 155, 176, 0.45);
  --text-on-navy:  #f4f0e8;
  --text-on-navy-mid: #c8d4e0;
  --text-on-navy-dim: #8a9bb0;

  --accent:        #c9a84c;
  --accent-light:  #e8c97a;
  --accent-deep:   #a07828;
  --accent-dim:    rgba(201, 168, 76, 0.12);
  --accent-watermark: rgba(201, 168, 76, 0.18);
  --accent-border: rgba(201, 168, 76, 0.25);
  --accent-glow:   rgba(201, 168, 76, 0.22);

  --border:        rgba(201, 168, 76, 0.10);
  --border-mid:    rgba(201, 168, 76, 0.22);
  --border-strong: rgba(201, 168, 76, 0.55);
  --border-on-navy: rgba(201, 168, 76, 0.10);
  --hairline:      rgba(201, 168, 76, 0.08);
  --hairline-gold: rgba(201, 168, 76, 0.22);

  --grid-line:         rgba(201, 168, 76, 0.04);
  --grid-line-on-navy: rgba(201, 168, 76, 0.035);

  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:     0 12px 32px -8px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 28px 72px -16px rgba(0, 0, 0, 0.5);
  --shadow-xl:     0 48px 120px -24px rgba(0, 0, 0, 0.6);
  --shadow-ambient: 0 32px 80px -20px rgba(0, 0, 0, 0.45);
  --shadow-floating: 0 24px 60px -12px rgba(0, 0, 0, 0.42), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
  --shadow-gold:   0 18px 48px -12px rgba(201, 168, 76, 0.32);
  --shadow-nav:    0 12px 40px -8px rgba(0, 0, 0, 0.55);

  --bezel-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.06);
  --bezel-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================================
   LIGHT THEME — cream chaud
   ============================================================ */
[data-theme="light"] {
  --bg-primary:    #ffffff;
  --bg-secondary:  #f5f0e6;
  --bg-tertiary:   #ede7d9;
  --bg-deep:       #e5dcc8;
  --bg-card:       #f8f8f6;
  --bg-card-hover: rgba(160, 120, 40, 0.06);
  --bg-card-elevated: #fffdf8;
  --bg-overlay:    rgba(255, 255, 255, 0.92);
  --bg-glass:      rgba(255, 253, 248, 0.78);

  --text-primary:  #0d1b2a;
  --text-body:     #2c4a6e;
  --text-muted:    #5a7a96;
  --text-faint:    rgba(90, 122, 150, 0.4);
  --text-on-navy:  #f4f0e8;
  --text-on-navy-mid: #c8d4e0;
  --text-on-navy-dim: #8a9bb0;

  --accent:        #a07828;
  --accent-light:  #c9a84c;
  --accent-deep:   #7a5a18;
  --accent-dim:    rgba(160, 120, 40, 0.08);
  --accent-watermark: rgba(160, 120, 40, 0.20);
  --accent-border: rgba(160, 120, 40, 0.30);
  --accent-glow:   rgba(160, 120, 40, 0.18);

  --border:        rgba(13, 27, 42, 0.10);
  --border-mid:    rgba(13, 27, 42, 0.20);
  --border-strong: rgba(13, 27, 42, 0.45);
  --border-on-navy: rgba(160, 120, 40, 0.18);
  --hairline:      rgba(13, 27, 42, 0.06);
  --hairline-gold: rgba(160, 120, 40, 0.20);

  --grid-line:         rgba(13, 27, 42, 0.03);
  --grid-line-on-navy: rgba(201, 168, 76, 0.035);

  --shadow-sm:     0 2px 8px rgba(13, 27, 42, 0.05);
  --shadow-md:     0 12px 32px -8px rgba(13, 27, 42, 0.08);
  --shadow-lg:     0 28px 72px -16px rgba(13, 27, 42, 0.14);
  --shadow-xl:     0 48px 120px -24px rgba(13, 27, 42, 0.20);
  --shadow-ambient: 0 32px 80px -20px rgba(13, 27, 42, 0.10);
  --shadow-floating: 0 24px 60px -12px rgba(13, 27, 42, 0.08), 0 8px 16px -4px rgba(13, 27, 42, 0.04);
  --shadow-gold:   0 18px 48px -12px rgba(160, 120, 40, 0.22);
  --shadow-nav:    0 12px 40px -8px rgba(13, 27, 42, 0.10);

  --bezel-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  --bezel-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(13, 27, 42, 0.1);
}

/* ============================================================
   TYPOGRAPHIE — Clash Display + Satoshi (v5.2 — pairing M1, 2026-05-19)
   Clash Display : grotesk display moderne (Fontshare). 6 weights 200-700.
                   Pas d'italique vrai — le `font-style: italic` synthese
                   un oblique propre a grosse taille (hero/h2).
   Satoshi       : grotesk body premium (Fontshare). Weights 300-900 +
                   vrais italiques. Pour les `<em>` body, c'est Satoshi
                   Italic qui est utilise (et non Clash faux-italic).
   Historique :
     - v5.1 Fraunces + Geist (2026-05-19, ~30 min)
     - v5.0 Cormorant Garamond + Plus Jakarta Sans (redesign initial)
     - v4 Cormorant Garamond + DM Sans (avant redesign)
   ============================================================ */
:root {
  --font-display: 'Clash Display', 'Cabinet Grotesk', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Aliases pour compat avec ancien code */
  --font-serif: var(--font-display);
  --font-sans:  var(--font-body);

  /* Échelle type — refonte cinématique
     Les `display-*` sont pour les h1/h2 éditoriaux. Les `text-*` pour body/UI. */
  --text-xs:    0.68rem;
  --text-sm:    0.72rem;
  --text-base:  0.875rem;
  --text-md:    1rem;
  --text-lg:    1.1rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   3rem;
  --text-4xl:   4.5rem;
  --text-5xl:   6rem;

  /* Display sizes — clamp pour responsive cinématique */
  --display-sm: clamp(2rem, 3.5vw, 3rem);
  --display-md: clamp(2.6rem, 5vw, 4.5rem);
  /* lg = utilisé par .manifesto-quote uniquement. Réduit 2026-05-20 :
     les manifestos sont des phrases longues, pas des punch lines. */
  --display-lg: clamp(1.7rem, 3.2vw, 2.8rem);
  /* xl = utilise uniquement pour le hero h1. Reduit 2026-05-19 apres feedback
     "vraiment trop gros" — etait clamp(4rem, 9vw, 9rem). */
  --display-xl: clamp(3rem, 6.5vw, 6rem);
  --display-2xl: clamp(4rem, 9vw, 8rem);

  /* Espacements — macro-whitespace Awwwards (py-24 à py-40) */
  --section-pad-y:  9rem;            /* py-36 équivalent */
  --section-pad-yt: 11rem;            /* sections top-heavy */
  --section-pad-x:  4rem;
  --container-max:  1240px;
  --container-narrow: 940px;
  --container-text: 720px;

  /* Bezel — Double-Bezel architecture
     outer-radius = outer shell, inner-radius = mathématiquement plus petit
     pour curves concentrique parfaite. */
  --bezel-radius-outer: 1.75rem;
  --bezel-radius-inner: calc(1.75rem - 0.4rem);
  --bezel-pad-outer:    0.4rem;
  --bezel-pad-large:    0.6rem;
  --bezel-radius-outer-lg: 2.25rem;
  --bezel-radius-inner-lg: calc(2.25rem - 0.6rem);

  /* Bezel pill — pour eyebrow tags, button-in-button cercle */
  --pill-radius: 999px;
  --pill-pad-x: 0.95rem;
  --pill-pad-y: 0.36rem;

  /* Animation — courbes signature
     --ease-spring : Linear-tier spring, pour reveals, hover, transitions principales
     --ease-haptic : overshoot léger pour button press feedback
     --ease-premium : ancienne courbe (gardée pour compat) */
  --ease-spring:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-haptic:   cubic-bezier(0.6, 0.05, 0.4, 1.1);
  --ease-glide:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);    /* compat ancien code */
  --dur-fast:      0.2s;
  --dur-mid:       0.35s;
  --dur-slow:      0.7s;
  --dur-reveal:    0.9s;
  --dur-cinematic: 1.2s;

  /* Bordures — radii contraints (skill bannit les arrondis sur surfaces de marque,
     sauf island buttons & bezels qui sont autorisés explicitement) */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-pill: 999px;

  /* Layered z-index — discipline systémique
     Skill : "Do not use arbitrary z-50 or z-[9999]. Reserve z-indexes strictly
     for systemic layers." */
  --z-grain:    1;
  --z-base:     10;
  --z-content:  20;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-cursor:   9998;
}

/* ============================================================
   RESPONSIVE — section padding
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-pad-x: 2.5rem;
    --section-pad-y: 7rem;
    --section-pad-yt: 8.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad-x: 1.5rem;
    --section-pad-y: 5rem;
    --section-pad-yt: 6rem;
    --bezel-pad-outer: 0.35rem;
    --bezel-radius-outer: 1.5rem;
    --bezel-radius-inner: calc(1.5rem - 0.35rem);
  }
}