/* ============================================================
   tokens.css — Design Tokens
   Single source of truth for all design values.
   Import this first in every other stylesheet.
   ============================================================ */

:root {
  /* ── Palette ─────────────────────────────── */
  --color-bg:           #f4f4f4;
  --color-bg-alt:       #e4e2dd;
  --color-ink:          #0f0f0e;
  --color-ink-2:        rgba(15, 15, 14, 0.42);
  --color-ink-3:        rgba(15, 15, 14, 0.20);
  --color-accent:       #b8ff39;
  --color-accent-soft:  rgba(184, 255, 57, 0.12);

  /* ── Surfaces ────────────────────────────── */
  --surface:            rgba(255, 255, 255, 0.52);
  --surface-2:          rgba(255, 255, 255, 0.28);

  /* ── Rules / Borders ─────────────────────── */
  --rule:               rgba(15, 15, 14, 0.07);
  --rule-2:             rgba(15, 15, 14, 0.12);

  /* ── Neumorphic Shadows ───────────────────── */
  --neu-out:  -5px -5px 12px rgba(255, 255, 255, 0.78),
               5px  5px 16px rgba(0,   0,   0,   0.11);
  --neu-in:   inset -3px -3px 7px  rgba(255, 255, 255, 0.70),
              inset  3px  3px  9px  rgba(0,   0,   0,   0.10);
  --neu-sm:   -3px -3px  8px  rgba(255, 255, 255, 0.75),
               3px  3px 10px  rgba(0,   0,   0,   0.10);

  /* ── Layout ──────────────────────────────── */
  --nav-h:    64px;
  --radius:   22px;
  --max-w:    1200px;
  --pad-x:    52px;

  /* ── Typography ──────────────────────────── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Transitions ─────────────────────────── */
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}