/*
 * SteadyHash Ventures — Design System tokens
 * Single source of truth for color, type, spacing, layout, and motion.
 * Mirrors pd/DESIGN.md. Consume these variables from main.css; do not hard-code
 * hex values elsewhere.
 */

:root {
  /* Color */
  --color-ink: #111827;
  --color-ink-soft: #1f2937;
  --color-bg: #ffffff;
  --color-bg-alt: #f3f4f6;
  --color-surface: #fafafa;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-muted: #6b7280;
  --color-faint: #9ca3af;
  --color-accent: #111827;
  /* Live-data accent (A+B hybrid pass): the ONE electric color on the site, owned
     exclusively by live data — the ticking signal column, the chart-line head dot,
     shockwave crests, accent flow particles and the headline underline. */
  --color-live: #0fa47e;

  /* Typography */
  --font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --fs-display: clamp(2.5rem, 5.2vw, 4.25rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing (4px base) */
  --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;
  --space-10: 128px;

  /* Layout */
  --max-width: 1200px;
  --gutter: 24px;
  /* Goal 9: stepped down one tier (was --space-10 / --space-9) to compact the
     vertical rhythm and match the denser cadence of pd/homepage.png. */
  --section-py: var(--space-9);
  --section-py-sm: var(--space-8);
  --header-h: 64px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 400ms;
  --dur: 550ms;
  --dur-slow: 700ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 48px;
  }
}