/* ═══════════════════════════════════════════
   TOKENS — Design system custom properties
   Parallel Loop · March 2026
   ═══════════════════════════════════════════ */

:root {
  /* ── Core palette ── */
  --ink:        #242424;
  --charcoal:   #2E2E2E;
  --slate:      #505050;
  --fog:        #8B8B8B;
  --cloud:      #BABABA;
  --accent:     #FF5C46;

  /* ── Slate scale ── */
  --slate-900:  #242424;
  --slate-800:  #333333;
  --slate-700:  #3E3E3E;
  --slate-600:  #505050;
  --slate-500:  #6A6A6A;
  --slate-400:  #8B8B8B;
  --slate-300:  #BABABA;
  --slate-200:  #D9D9D9;
  --slate-100:  #F0F0F0;

  /* ── Supporting neutrals ── */
  --text-primary:   #242424;
  --text-secondary: #505050;
  --text-muted:     #8B8B8B;
  --border:         #D9D9D9;

  /* ── Semantic surfaces ── */
  --surface-dark:   var(--ink);
  --surface-white:  #FFFFFF;

  /* ── Typography ── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-display:  800 54px/1.1 var(--font);
  --text-heading:  700 32px/1.15 var(--font);
  --text-subhead:  600 18px/1.3 var(--font);
  --text-body:     400 16px/1.6 var(--font);
  --text-caption:  500 12px/1.4 var(--font);

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-subhead: -0.01em;
  --tracking-body:    0;
  --tracking-caption:  0.1em;

  /* ── Spacing (8pt grid) ── */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-128: 128px;

  /* ── Layout ── */
  --container-max: 1200px;
  --container-pad: 80px;

  /* ── Borders ── */
  --radius: 4px;
  --radius-lg: 8px;

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Transitions ── */
  --duration-fast: 0.15s;
  --duration-med:  0.4s;
  --duration-slow: 0.75s;
}