/* Design tokens. Source of truth: docs/design-brief.md section 7. Components use var(--...) only. */

@font-face { font-family: "Chakra Petch"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Colour */
  --c-bg: #05070D;
  --c-bg-2: #0A0F1C;
  --c-panel: #0F1729;
  --c-panel-2: #16213A;
  --c-line: #23314F;
  --c-line-strong: #3A4D75;
  --c-text: #E8EEF8;
  --c-text-muted: #9AAAC6;
  --c-text-dim: #7F91B0;
  --c-signal: #3BE3FF;
  --c-signal-ink: #00131A;
  --c-violet: #8B6CFF;
  --c-amber: #FFB224;
  --c-go: #3DFFA8;
  --c-alert: #FF4D5E;
  --c-focus: #FFE45C;

  /* Effects */
  --g-hero: radial-gradient(ellipse at 50% 30%, #12234a 0%, #0A0F1C 45%, #000000 100%);
  --g-beam: linear-gradient(180deg, var(--c-signal) 0%, transparent 100%);
  --g-scanlines: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 3px);
  --g-grid:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  --g-grid-size: 48px 48px;

  /* Type families */
  --f-display: "Chakra Petch", "Eurostile", "Bahnschrift", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.75rem;
  --t-2xl: clamp(2rem, 4vw, 3rem);
  --t-hero: clamp(2.5rem, 7vw, 5.5rem);

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

  /* Radii */
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --d-fast: 150ms;
  --d-med: 300ms;
  --d-slow: 700ms;

  /* Layout (breakpoints are mobile-first at min-width 640px, 960px, 1280px) */
  --w-content: 1200px;
}