/* tokens.css — design tokens for guaardvark.com
 * Single source of truth for palette, typography, spacing, motion.
 * No component CSS lives here.
 */

:root {
  /* ===== Palette =====
     Restored to pre-Phase-1 aesthetic: pure black background with translucent
     whites everywhere. Token names preserved so the component library keeps
     working without a sweep through pages.css. */
  --color-bg: #000000;
  /* Elevated surfaces sit on a 40-65% black tint so the animated neural-net
     background never fights legibility. Pair with backdrop-filter blur on
     card-class selectors for the frosted-glass effect. */
  --color-bg-elev-1: rgba(0, 0, 0, 0.42);
  --color-bg-elev-2: rgba(0, 0, 0, 0.55);
  --color-bg-elev-3: rgba(0, 0, 0, 0.68);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  --color-ink: rgba(255, 255, 255, 0.85);
  --color-ink-muted: rgba(255, 255, 255, 0.6);
  --color-ink-faint: rgba(255, 255, 255, 0.55);

  /* Old design had no chromatic accent — these inherit neutral white tones */
  --color-ice-1: rgba(255, 255, 255, 0.85);
  --color-ice-2: rgba(255, 255, 255, 0.6);
  --color-ice-3: rgba(255, 255, 255, 0.4);
  --color-ice-glow: rgba(255, 255, 255, 0.08);

  /* CTA: bordered rgba-white pill, never amber */
  --color-cta: rgba(255, 255, 255, 0.06);
  --color-cta-hover: rgba(255, 255, 255, 0.14);
  --color-cta-ink: rgba(255, 255, 255, 0.9);

  --color-success: rgba(255, 255, 255, 0.7);
  --color-warn: rgba(255, 255, 255, 0.7);
  --color-error: rgba(255, 255, 255, 0.7);

  /* ===== Typography ===== */
  --font-display: "Raleway", system-ui, -apple-system, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Modular scale (1.25 ratio) base 16px */
  --text-xs:    0.7813rem;   /* 12.5  */
  --text-sm:    0.875rem;    /* 14    */
  --text-base:  1rem;        /* 16    */
  --text-md:    1.25rem;     /* 20    */
  --text-lg:    1.5625rem;   /* 25    */
  --text-xl:    1.953rem;    /* ~31   */
  --text-2xl:   2.441rem;    /* ~39   */
  --text-3xl:   3.052rem;    /* ~49   */
  --text-4xl:   3.815rem;    /* ~61   */
  --text-5xl:   4.768rem;    /* ~76   */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-loose: 1.75;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.18em;

  /* ===== Spacing (8px base) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ===== Radii ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ===== Shadows + glows ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
  --glow-ice: 0 0 24px rgba(255, 255, 255, 0.06);
  --glow-cta: 0 0 18px rgba(255, 255, 255, 0.06);

  /* ===== Layout ===== */
  --width-prose: 68ch;
  --width-narrow: 880px;
  --width-content: 1180px;
  --width-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ===== Motion ===== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-hero: 600ms;

  /* ===== Z-stack ===== */
  --z-base: 0;
  --z-elev: 10;
  --z-nav: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-hero: 0ms;
  }
}