/* followroom tokens — generated from tokens.json; don't edit by hand.
   Themes: put data-theme on <html> (or any container):
     data-theme="dark"    dark, whatever the system says (also the default with no attribute)
     data-theme="light"   light
     data-theme="system"  follows the device's light / dark setting, and changes with it
   css/theme.js (or followroom.theme / followroomHTML.theme) sets it and remembers the choice. */
@font-face { font-family: 'Inter'; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* Dark — the brand's primary theme, and what you get with no data-theme at all */
:root, [data-theme="dark"], [data-theme="system"] {
  --surface-000: #0b0d10;
  --surface-100: #14171c;
  --line: #262b33;
  --ink: #e6e9ee;
  --ink-muted: #8b94a3;
  --signal: #3ee6a8;
  --signal-soft: #0f2a22;
  --on-signal: #0b0d10;
  --amber: #f5b13d;
  --danger: #ff6b6b;
  color-scheme: dark;
}

/* Light — bright rooms and weak projectors */
[data-theme="light"] {
  --surface-000: #f7f8fa;
  --surface-100: #ffffff;
  --line: #dde1e6;
  --ink: #0f1216;
  --ink-muted: #5a6270;
  --signal: #0a7d58;
  --signal-soft: #dff7ee;
  --on-signal: #ffffff;
  --amber: #9a5b00;
  --danger: #c42b2b;
  color-scheme: light;
}

/* System — light when the device is set to light */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --surface-000: #f7f8fa;
    --surface-100: #ffffff;
    --line: #dde1e6;
    --ink: #0f1216;
    --ink-muted: #5a6270;
    --signal: #0a7d58;
    --signal-soft: #dff7ee;
    --on-signal: #ffffff;
    --amber: #9a5b00;
    --danger: #c42b2b;
    color-scheme: light;
  }
}

/* Theme-independent */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --container: 1200px;
  --measure: 680px;
  --bp-sm: 640px;
  --bp-md: 960px;
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Type styles — one class per style in tokens.json */
.fr-type-web-hero { font-family: var(--font-sans); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.03em; }
.fr-type-web-h2 { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.fr-type-web-h3 { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.fr-type-web-lead { font-family: var(--font-sans); font-size: 20px; line-height: 32px; font-weight: 400; }
.fr-type-web-body { font-family: var(--font-sans); font-size: 17px; line-height: 28px; font-weight: 400; }
.fr-type-stage-title { font-family: var(--font-sans); font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -0.02em; }
.fr-type-stage-body { font-family: var(--font-sans); font-size: 36px; line-height: 48px; font-weight: 400; }
.fr-type-join-code { font-family: var(--font-mono); font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: 0.08em; }
.fr-type-display { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -0.02em; }
.fr-type-title { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.fr-type-heading { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.fr-type-body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.fr-type-small { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }
.fr-type-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.fr-type-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* The page itself: theme colours and a short cross-fade when the theme changes (not under reduced motion) */
html, [data-theme] { background-color: var(--surface-000); color: var(--ink); } /* a themed container takes its own page colour and text colour */
@media (prefers-reduced-motion: no-preference) {
  html.fr-theme-changing, html.fr-theme-changing * { transition: background-color .2s, border-color .2s, color .2s !important; }
}