/* ============================================================
   THESTACKPICKS.COM — DESIGN TOKENS (source de vérité unique)
   Architecture 2 niveaux : primitives → tokens sémantiques.
   Les composants n'utilisent QUE les sémantiques. Identiques FR/EN.
   ============================================================ */

:root {
  /* ---------- PRIMITIVES — COULEUR ---------- */
  /* Encres */
  --c-ink-900: #101828;        /* titres */
  --c-ink-700: #344054;        /* corps de texte */
  --c-ink-500: #667085;        /* secondaire, métadonnées */
  --c-ink-300: #98A2B3;        /* placeholders, désactivé */

  /* Surfaces */
  --c-white:   #FFFFFF;
  --c-bg-alt:  #F7F8FA;        /* sections alternées */
  --c-border:  #E4E7EC;
  --c-border-strong: #D0D5DD;

  /* Indigo Orbit (marque, navigation, liens) */
  --c-indigo-700: #4338CA;
  --c-indigo-600: #4F46E5;
  --c-indigo-100: #E0E7FF;
  --c-indigo-50:  #EEF2FF;

  /* Orange Ignition (argent) */
  --c-orange-700: #B83A06;
  --c-orange-600: #D9480F;
  --c-orange-50:  #FFF1E8;

  /* Sémantiques métier */
  --c-green-700: #067647;      /* avantages, "vérifié" */
  --c-green-50:  #ECFDF3;
  --c-red-700:   #B42318;      /* inconvénients */
  --c-red-50:    #FEF3F2;
  --c-amber-500: #F59E0B;      /* étoiles, gauge de note */
  --c-amber-50:  #FFFAEB;
  --c-amber-ink: #92400E;      /* texte sur fond ambre tint */

  /* ---------- TOKENS SÉMANTIQUES ---------- */
  --ls-ink:          var(--c-ink-900);
  --ls-body:         var(--c-ink-700);
  --ls-muted:        var(--c-ink-500);
  --ls-disabled:     var(--c-ink-300);
  --ls-surface:      var(--c-white);
  --ls-surface-alt:  var(--c-bg-alt);
  --ls-border:       var(--c-border);
  --ls-border-strong:var(--c-border-strong);

  --ls-brand:        var(--c-indigo-600);
  --ls-brand-strong: var(--c-indigo-700);
  --ls-brand-tint:   var(--c-indigo-50);
  --ls-brand-tint-2: var(--c-indigo-100);
  --ls-link:         var(--c-indigo-700);

  --ls-cta:          var(--c-orange-600);
  --ls-cta-hover:    var(--c-orange-700);
  --ls-cta-tint:     var(--c-orange-50);

  --ls-pro:          var(--c-green-700);
  --ls-pro-tint:     var(--c-green-50);
  --ls-con:          var(--c-red-700);
  --ls-con-tint:     var(--c-red-50);
  --ls-star:         var(--c-amber-500);
  --ls-star-tint:    var(--c-amber-50);
  --ls-star-ink:     var(--c-amber-ink);

  /* ---------- TYPOGRAPHIE ---------- */
  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-body:    "Inter", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Échelle desktop (les mobiles surchargent via @media) */
  --fs-display: 44px;  --lh-display: 1.1;
  --fs-h2:      32px;  --lh-h2:      1.2;
  --fs-h3:      24px;  --lh-h3:      1.3;
  --fs-h4:      19px;  --lh-h4:      1.4;
  --fs-body:    17px;  --lh-body:    1.65;
  --fs-small:   15px;  --lh-small:   1.5;
  --fs-caption: 13px;  --lh-caption: 1.4;
  --fs-score:   56px;  --lh-score:   1;

  --ls-eyebrow: 0.06em;  /* letter-spacing eyebrows mono uppercase */

  /* ---------- ESPACEMENT (échelle 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- RAYONS ---------- */
  --r-s: 6px;     /* inputs, tags */
  --r-m: 10px;    /* cartes, verdict, tableaux */
  --r-pill: 999px;

  /* ---------- OMBRES (discrètes, site plat) ---------- */
  --sh-card:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-raised: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --sh-sticky: 0 -4px 16px rgba(16,24,40,.12);

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --reading: 700px;
  --sidebar: 320px;
  --gutter: 48px;

  /* ---------- BREAKPOINTS (pour mémoire) ---------- */
  /* --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; */
}

@media (max-width: 768px) {
  :root {
    --fs-display: 32px;  --lh-display: 1.15;
    --fs-h2:      26px;  --lh-h2:      1.25;
    --fs-h3:      21px;  --lh-h3:      1.3;
    --fs-h4:      18px;  --lh-h4:      1.4;
    --fs-body:    16px;  --lh-body:    1.65;
    --gutter: 0px;
  }
}