:root {
  color-scheme: light dark;
  --stoked-ink: #12382e;
  --stoked-ink-soft: #4f655d;
  --stoked-paper: #f6f3ec;
  --stoked-surface: #fffef9;
  --stoked-surface-muted: #eef3ea;
  --stoked-line: #c7d0c7;
  --stoked-green: #12382e;
  --stoked-accent: #a7e66f;
  --stoked-sky: #7dd3fc;
  --stoked-gold: #f2b85b;
  --stoked-error: #b42318;
  --stoked-dark: #07131f;
  --stoked-dark-raised: #0f1f2b;
  --stoked-dark-line: rgba(255, 255, 255, .13);
  --stoked-dark-text: #f8fafc;
  --stoked-dark-muted: #cbd5e1;
  --stoked-radius-sm: 8px;
  --stoked-radius-md: 16px;
  --stoked-radius-lg: 24px;
  --stoked-shadow: 0 18px 45px rgba(18, 56, 46, .12);
  --stoked-shadow-dark: 0 24px 70px rgba(2, 6, 23, .34);
  --stoked-focus: #d38425;
  --stoked-font: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}

body,
body.club,
body.stoked-app,
body.stoked-flow,
body.stoked-landing,
body.stoked-wp { font-family: var(--stoked-font); -webkit-font-smoothing: antialiased; }
body.club, body.stoked-wp { color-scheme: light; }
body.stoked-app, body.stoked-flow, body.stoked-landing { color-scheme: dark; }

body.club {
  --ink: var(--stoked-ink);
  --paper: var(--stoked-paper);
  --accent: var(--stoked-accent);
  --flow-page: var(--stoked-paper);
  --flow-surface: var(--stoked-surface);
  --flow-surface-muted: var(--stoked-surface-muted);
  --flow-border: var(--stoked-line);
  --flow-muted: var(--stoked-ink-soft);
  --flow-focus: var(--stoked-focus);
}

body.stoked-flow {
  --paper: var(--stoked-paper);
  --ink: #161616;
  --accent: var(--stoked-accent);
  background: linear-gradient(180deg, var(--stoked-dark), #0a1b24 55%, #06111c);
  color: var(--stoked-dark-text);
}
body.stoked-flow .flow-nav { border-color: var(--stoked-dark-line); }
body.stoked-flow .flow-lede, body.stoked-flow .flow-footer { color: var(--stoked-dark-muted); }
body.stoked-flow .flow-panel { border: 1px solid var(--stoked-line); box-shadow: var(--stoked-shadow); }
body.stoked-flow .flow-panel--dark { border-color: var(--stoked-dark-line); box-shadow: var(--stoked-shadow-dark); }

body.stoked-app {
  --color-midnight-navy: var(--stoked-dark);
  --color-liberty-blue: #38bdf8;
  --color-valor-red: #e85d75;
  --color-victory-gold: var(--stoked-accent);
  --color-steel-grey: var(--stoked-dark-muted);
  background-color: var(--stoked-dark);
  color: var(--stoked-dark-text);
}

body.stoked-landing {
  --ink: var(--stoked-dark-text);
  --ink-soft: var(--stoked-dark-muted);
  --ink-faint: #94a3b8;
  --line: var(--stoked-dark-line);
  --deep-green: var(--stoked-accent);
  --moss: var(--stoked-sky);
  --gold: var(--stoked-gold);
  --radius-xl: 32px;
  --radius-lg: var(--stoked-radius-lg);
  --radius-md: 18px;
  --radius-sm: 14px;
  background-color: var(--stoked-dark);
  color: var(--stoked-dark-text);
}

body.stoked-wp {
  --paper: var(--stoked-paper);
  --ink: var(--stoked-ink);
  --muted: var(--stoked-ink-soft);
  --card-bg: var(--stoked-surface);
  --card-border: var(--stoked-line);
  --line: var(--stoked-line);
  background-color: var(--stoked-paper);
  color: var(--stoked-ink);
}
body.stoked-wp :is(.card, .join-hero, .setup-card, .checklist-section, .terms-card, .personal-toolbar) {
  box-shadow: var(--stoked-shadow);
}

body.stoked-app :is(a, button, input, textarea, select):focus-visible,
body.stoked-flow :is(a, button, input, textarea, select):focus-visible,
body.stoked-landing :is(a, button, input, textarea, select):focus-visible,
body.stoked-wp :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--stoked-sky);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
