/* Design tokens — extracted from the Beam Planera DS / Figma case study source.
   Update this file first when the design system changes; everything else
   should reference these custom properties rather than hardcoded values. */

:root {
  /* ── Surface ─────────────────────────────────────────────────────────── */
  --color-bg: #010716;
  --color-surface-1: #0a1226;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-subtle: rgba(255, 255, 255, 0.5);

  /* ── Accents ─────────────────────────────────────────────────────────── */
  --color-accent-blue: #708dff;
  --color-accent-green: #7dffb9;
  --color-accent-red: #ff8282;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;

  /* Type scale (matches Figma) */
  --fs-eyebrow: 14px;
  --fs-label: 12px;
  --fs-body-sm: 15px;
  --fs-body: 16px;
  --fs-tag: 24px;
  --fs-quote: 24px;
  --fs-h3: 30px;
  --fs-h2: 36px;
  --fs-h1: 48px;

  /* Line heights */
  --lh-tight: 1.3;
  --lh-body: 1.5;

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --page-max: 1512px;
  --content-gutter: 160px;
  --content-max: 1192px; /* page-max - 2 * gutter */

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
}

@media (max-width: 1280px) {
  :root {
    --content-gutter: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --content-gutter: 24px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-tag: 18px;
    --fs-quote: 18px;
  }
}