/* tokens.css
 * Design tokens for tasteskill.dev recreation.
 * Editorial cream-on-ink magazine aesthetic.
 * Locked tokens:
 *   - One accent (#C2410C) used identically across all sections
 *   - Display: Newsreader (Google Fonts) - skill-compliant (NOT Fraunces, NOT Instrument Serif)
 *   - Body: Inter Tight (tighter than Inter, escapes AI default)
 *   - Mono: JetBrains Mono
 *   - Page is paper-first; night tones are explicit per-section only.
 */

:root {
  /* Colors */
  --color-paper:    #F4EFE6;
  --color-surface:  #FBF8F2;
  --color-ink:      #131211;
  --color-muted:    #6B6660;
  --color-hairline: #D4CFC4;
  --color-accent:   #C2410C;
  --color-night:    #131211;
  --color-night-muted: #8A8580;

  /* Fonts */
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale & tracking */
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.12em;
  --tracking-mono:    0.02em;

  /* Shape */
  --radius-pill:  9999px;
  --radius-card:  16px;
  --radius-block: 12px;
  --radius-sm:    6px;

  /* Spacing */
  --space-section:    72px;
  --space-section-md: 112px;
  --space-lg:         40px;
  --space-md:         24px;
  --space-sm:         12px;

  /* Layout */
  --container-max: 1280px;
  --container-px:  24px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    280ms;
  --dur-slow:    600ms;

  /* Z-index scale */
  --z-base:    1;
  --z-rail:    5;
  --z-nav:     50;
  --z-overlay: 100;
}

@media (min-width: 768px) {
  :root {
    --container-px: 40px;
  }
}

/* Page is paper-first by design. Do NOT auto-invert on system dark mode.
   Night tones are explicit via .tone-night class on specific sections only. */