/* tokens.css */
@layer tokens {
  :root {
    /* Layout */
    --container-max: 1120px;
    --reading-max: 72ch;

    /* Sticky header offset (used for anchors + skip) */
    --scroll-padding: 92px;

    /* Spacing (8px-ish scale) */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* Elevation */
    --shadow-1: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.20);
    --shadow-2: 0 1px 0 rgba(0,0,0,.28), 0 16px 48px rgba(0,0,0,.28);

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Responsive type scale (keeps pages consistent on desktop+mobile) */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;

    --text-xl: clamp(18px, 1.2vw + 14px, 20px);
    --text-2xl: clamp(20px, 1.4vw + 15px, 24px);
    --text-3xl: clamp(26px, 2.2vw + 14px, 34px);
    --text-4xl: clamp(32px, 3.2vw + 12px, 44px);

    --lh-tight: 1.12;
    --lh-body: 1.55;

    /* Motion */
    --dur-1: 120ms;
    --dur-2: 180ms;
    --ease: cubic-bezier(.2,.8,.2,1);

    /* Semantic colors (keep conservative; enterprise) */
    --bg: #0b0d12;
    --surface: rgba(255,255,255,0.06);
    --surface-2: rgba(255,255,255,0.10);
    --border: rgba(255,255,255,0.14);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.72);

    /* Buttons / focus */
    --primary: rgba(255,255,255,0.92);
    --primary-text: rgba(0,0,0,0.92);
    --focus: rgba(255,255,255,0.92);

    /* Status */
    --danger: #ff5c5c;
    --success: #58d68d;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-1: 0ms; --dur-2: 0ms; }
  }
}