/*
 * Vector-First Design Standard v1.0 — Design tokens.
 * Source of truth: Marketing/Website/Vector-First-Design-Standard.html.
 * Light + dark themes mandatory; no per-org color customization
 * (per DEC-2026-04-27-009).
 */

:root {
  /* Type stack — bRRAIn brand fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 */
  --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;

  /* Type scale */
  --fs-xs: 0.75rem;     /* 12px — captions, footnotes */
  --fs-sm: 0.875rem;    /* 14px — secondary text, labels */
  --fs-base: 1rem;      /* 16px — body */
  --fs-md: 1.125rem;    /* 18px — emphasized body */
  --fs-lg: 1.25rem;     /* 20px — section heading */
  --fs-xl: 1.5rem;      /* 24px — small display */
  --fs-2xl: 2rem;       /* 32px — display */
  --fs-3xl: 3rem;       /* 48px — large display */
  --fs-4xl: 4.5rem;     /* 72px — hero */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-base: 1.6;
  --lh-comfortable: 1.7;

  /* Letter spacing */
  --ls-tight: -0.04em;
  --ls-base: 0;
  --ls-wide: 0.05em;
  --ls-eyebrow: 0.14em;

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Border alphas — neutral palette only (color customization forbidden) */
  --border-strong: 0.20;
  --border-base: 0.10;
  --border-soft: 0.08;

  /* Surface alphas */
  --surface-raised: 0.02;
  --surface-glass: 0.80;

  /* Text alphas (used with currentColor + opacity recipes) */
  --text-primary: 1;
  --text-secondary: 0.55;
  --text-muted: 0.32;

  /* State colors — limited semantic palette per Vector-First.
     These are status pills only; chrome is strict black/white. */
  --status-ok: #4ade80;     /* green-400 */
  --status-warn: #fbbf24;   /* amber-400 */
  --status-alert: #f87171;  /* red-400 */
  --status-info: #60a5fa;   /* blue-400 */

  /* Motion */
  --easing: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --motion-fast: 0.15s var(--easing);
  --motion-base: 0.2s var(--easing);
  --motion-slow: 0.4s var(--easing);

  /* Layout — content widths */
  --width-content: 1200px;
  --width-form: 480px;
  --width-prose: 720px;

  /* z-index ladder */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 10000;
}

/* The Vector-First design has only two surfaces: pure black (#000)
   on dark and pure white (#fff) on light. Everything else is alphas
   over those two. These two tokens are the *only* color literals the
   SDK exposes; consumers must not redefine them. */
:root {
  --bg-dark: #000000;
  --fg-dark: #ffffff;
  --bg-light: #ffffff;
  --fg-light: rgba(0, 0, 0, 0.90);
}