/* ============================================================
   Hi Folks - Design System · Tokens (source of truth)
   v4 · juin 2026 · aligné sur la direction validée (preview-g-light)
   ------------------------------------------------------------
   Studio = LIGHT-first, avec quelques sections sombres quand ça sert.
   Gradient Aurora = signature, à utiliser AVEC PARCIMONIE
   (mots courts uniquement, jamais gradient-fond + gradient-texte ensemble).
   Consommez les tokens sémantiques (--bg, --fg, --accent...), pas les primitives.
   ============================================================ */

:root{
  /* ---------- PRIMITIVES ---------- */
  /* Aurora — vert frais -> cyan -> bleu (signature) */
  --green-200:#A7F3C8; --green-300:#7DEBA8; --green-400:#34D399; --green-500:#10B981;
  --green-btn:#13C08E; --green-on-dark:#46E3A0;
  --cyan-300:#7FE0E6; --cyan-400:#56D0D8; --cyan-600:#0EA5B5;
  --blue-300:#A9C8FF; --blue-400:#5FA8FF; --blue-500:#4F8DFF; --blue-600:#3B82F6;
  --violet-500:#6E5BFF;          /* accent premium, en touche */
  --amber-400:#F5B544;           /* highlight, fonctionnel */

  /* Neutres clairs (base Studio) */
  --paper:#FBFCFD; --white:#FFFFFF; --soft:#F2F5F8;
  --ink-900:#14161C; --ink-600:#566070; --ink-400:#8A93A1; --line-l:#E7EAEF;

  /* Neutres sombres (sections dark / dark mode) */
  --ink-950:#0C0E13; --ink-850:#161922; --ink-800:#1C2029; --hair-d:#262B36; --hair-d2:#333A47;
  --fg-d:#F4F6FA; --fg-d-mut:#A2A8B4; --fg-d-dim:#6B7280;

  /* Gradients */
  --grad-aurora:linear-gradient(105deg,#10B981,#0EA5B5 52%,#3B82F6);       /* mots courts sur fond clair */
  --grad-aurora-soft:linear-gradient(105deg,#7DEBA8,#7FE0E6 52%,#A9C8FF);  /* mots courts sur fond sombre */
  --grad-aurora-bar:linear-gradient(105deg,#10B981,#0EA5B5 52%,#3B82F6);   /* filets, barres, sparklines */

  /* ---------- TYPE ---------- */
  --font-display:"Sora","Avenir Next",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-hero:clamp(3rem,6.2vw,5rem);
  --fs-h1:clamp(2.4rem,4vw,3.2rem);
  --fs-h2:clamp(2rem,3.2vw,2.6rem);
  --fs-h3:1.2rem;
  --fs-lead:1.18rem;
  --fs-body:1rem;
  --fs-sm:.9rem;
  --fs-eyebrow:.72rem;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.0; --lh-snug:1.12; --lh-body:1.62;
  --track-hero:-.04em; --track-tight:-.028em; --track-eyebrow:.2em;

  /* ---------- SPACE / RADIUS / MOTION ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:90px; --space-10:128px;
  --r-sm:12px; --r-md:18px; --r-lg:22px; --r-pill:999px;   /* boutons = pill (arrondi, chaleureux) */
  --container:1140px; --container-narrow:820px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur-fast:180ms; --dur:300ms; --dur-slow:550ms;
}

/* ============================================================
   THÈME SÉMANTIQUE
   Base = LIGHT (le site Studio). Les sections sombres utilisent
   [data-theme="dark"] (ou .section--dark) pour basculer localement.
   ============================================================ */
:root, [data-theme="light"]{
  --bg:var(--paper); --surface:var(--white); --surface-2:var(--soft); --line:var(--line-l);
  --fg:var(--ink-900); --fg-muted:var(--ink-600); --fg-dim:var(--ink-400);
  --accent:var(--green-btn);            /* CTA / interactif (vert) */
  --accent-ink:#04261A;                 /* texte sur bouton vert */
  --accent-premium:var(--violet-500);
  --logo-dot:var(--cyan-600);           /* point du logo (teal #0EA5B5) - signal marque, distinct du vert d'action */
  --gradient-text:var(--grad-aurora);   /* mots-clés courts */
  --btn-primary-bg:var(--green-btn); --btn-primary-fg:#04261A;
  --shadow:0 1px 2px rgba(20,22,28,.04), 0 30px 60px -44px rgba(20,22,28,.5);
  --glow:radial-gradient(46% 60% at 50% 38%,rgba(16,185,129,.13),transparent 60%),
         radial-gradient(46% 60% at 70% 56%,rgba(79,141,255,.14),transparent 60%);
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:var(--ink-950); --surface:var(--ink-850); --surface-2:var(--ink-800); --line:var(--hair-d);
  --fg:var(--fg-d); --fg-muted:var(--fg-d-mut); --fg-dim:var(--fg-d-dim);
  --accent:var(--green-on-dark); --accent-ink:#04261A; --accent-premium:#9A8BFF;
  --gradient-text:var(--grad-aurora-soft);
  --btn-primary-bg:#FFFFFF; --btn-primary-fg:var(--ink-950);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 40px 90px -50px #000;
  --glow:radial-gradient(46% 56% at 50% 8%,rgba(70,227,160,.16),transparent 60%),
         radial-gradient(50% 60% at 78% 30%,rgba(95,168,255,.14),transparent 60%);
  color-scheme:dark;
}