/* ═══════════════════════════════════════════════════════════════
   TOKENS.CSS — DevStudio Design System
   Direction : "Planche technique" — papier froid, encre graphite,
   tracés ultramarine, annotations monospace.
   Le bleu est une ENCRE, pas un fond.
═══════════════════════════════════════════════════════════════ */
:root{

  /* ── Palette brute ────────────────────────────────── */
  --paper-50:  #FAFBFC;
  --paper-100: #F1F2F5;
  --paper-200: #E7E9ED;
  --paper-300: #D8DBE2;

  --graphite-900: #101319;
  --graphite-800: #171B23;
  --graphite-700: #20252F;
  --graphite-600: #2C323E;

  --slate-600: #4E5766;
  --slate-500: #6B7484;
  --slate-400: #98A0AD;

  --ultramarine-700: #1E2CA8;
  --ultramarine-600: #2536C4;
  --ultramarine-500: #2A3BD4;
  --ultramarine-300: #7C88E8;

  --jade-600: #0C7A5C;
  --jade-500: #0E8A68;
  --jade-300: #4FC6A3;

  --amber-500: #A8760C;
  --rust-500:  #A63A2C;

  /* ── Sémantique — thème clair (défaut) ────────────── */
  --bg:            var(--paper-100);
  --bg-alt:        var(--paper-200);
  --surface:       #FFFFFF;
  --surface-2:     var(--paper-50);
  --surface-hover: var(--paper-50);

  --text:    var(--graphite-900);
  --text-2:  var(--slate-600);
  --text-3:  var(--slate-500);

  --border:        rgba(16,19,25,.10);
  --border-strong: rgba(16,19,25,.20);
  --rule:          rgba(16,19,25,.07);

  --brand:       var(--ultramarine-500);
  --brand-hover: var(--ultramarine-700);
  --brand-ink:   #FFFFFF;
  --brand-soft:  rgba(42,59,212,.07);
  --brand-line:  rgba(42,59,212,.24);

  --accent:      var(--jade-500);
  --accent-soft: rgba(14,138,104,.09);

  --success: var(--jade-600);
  --warning: var(--amber-500);
  --error:   var(--rust-500);

  --focus: var(--ultramarine-500);

  /* ── Typographie ──────────────────────────────────── */
  --ff-display: 'Space Grotesk', 'Inter', sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-note:  0.688rem;   /* annotations */
  --fs-cap:   0.75rem;    /* captions, eyebrows */
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.0625rem;
  --fs-xl:    clamp(1.25rem, 1.1rem + .7vw,  1.5rem);
  --fs-h3:    clamp(1.375rem, 1.2rem + .9vw, 1.75rem);
  --fs-h2:    clamp(1.875rem, 1.4rem + 2.4vw, 3.125rem);
  --fs-h1:    clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);

  --lh-tight: 1.02;
  --lh-snug:  1.22;
  --lh-body:  1.65;
  --lh-loose: 1.78;

  --tr-tight: -.035em;
  --tr-mid:   -.018em;
  --tr-wide:  .10em;
  --tr-mono:  .04em;

  /* ── Espacement ───────────────────────────────────── */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 5rem;    --sp-10: 7rem;

  --gutter:   clamp(1.25rem, 4.5vw, 5.5rem);
  --sec-y:    clamp(4.5rem, 8vw, 9rem);
  --stack-lg: clamp(2.5rem, 4vw, 4.5rem);
  --maxw:     1440px;

  /* ── Rayons (contenus, jamais énormes) ────────────── */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ── Ombres (discrètes) ───────────────────────────── */
  --sh-hair:  0 1px 2px rgba(16,19,25,.05);
  --sh-soft:  0 2px 6px rgba(16,19,25,.05), 0 12px 28px -14px rgba(16,19,25,.14);
  --sh-lift:  0 4px 10px rgba(16,19,25,.06), 0 24px 48px -20px rgba(16,19,25,.22);
  --sh-brand: 0 10px 30px -12px rgba(42,59,212,.5);

  /* ── Mouvement ────────────────────────────────────── */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .16s;
  --t-base: .28s;
  --t-slow: .55s;
  --t-reveal: .85s;
}

/* ── Thème sombre — appliqué par section ───────────── */
[data-theme="dark"]{
  --bg:            var(--graphite-900);
  --bg-alt:        var(--graphite-800);
  --surface:       var(--graphite-800);
  --surface-2:     var(--graphite-700);
  --surface-hover: var(--graphite-700);

  --text:   var(--paper-100);
  --text-2: rgba(241,242,245,.68);
  --text-3: rgba(241,242,245,.46);

  --border:        rgba(241,242,245,.13);
  --border-strong: rgba(241,242,245,.26);
  --rule:          rgba(241,242,245,.09);

  --brand:       var(--ultramarine-300);
  --brand-hover: #A3ACF2;
  --brand-ink:   var(--graphite-900);
  --brand-soft:  rgba(124,136,232,.12);
  --brand-line:  rgba(124,136,232,.32);

  --accent:      var(--jade-300);
  --accent-soft: rgba(79,198,163,.12);

  --focus: var(--ultramarine-300);

  --sh-soft: 0 2px 6px rgba(0,0,0,.3), 0 14px 32px -16px rgba(0,0,0,.6);
  --sh-lift: 0 6px 14px rgba(0,0,0,.34), 0 28px 56px -22px rgba(0,0,0,.7);
}