/**
 * @file theme.css
 * Future Spark design tokens (docs/design-handoff/README.md § Design tokens).
 *
 * The site is dark-only. The shadcn-style variables the inherited Mercury
 * components read are mapped onto the Future Spark palette, so those
 * components (button, heading, card, …) match the custom fs components.
 * Values here do not need a CSS rebuild.
 */

:root {
  color-scheme: dark;

  /* Future Spark palette */
  --fs-bg: #0a0a0b;
  --fs-bg-elev: #111113;
  --fs-bg-card: #141416;
  --fs-bg-alt: #09090a;
  --fs-line: #1f1f22;
  --fs-line-2: #2a2a2f;
  --fs-fg: #f5f4f1;
  --fs-fg-muted: #9a9a9f;
  --fs-fg-dim: #6a6a70;
  --fs-accent: #ff6a1a;
  --fs-accent-hover: #ff7a2e;
  --fs-accent-soft: #ffb47a;
  --fs-accent-glow: rgba(255, 106, 26, 0.35);
  --fs-on-accent: #1a0a00;
  --fs-status: #31d07a;
  --fs-status-glow: rgba(49, 208, 122, 0.5);
  --fs-error: #ff5a5a;
  --fs-error-soft: #ff8a8a;

  /* Layout */
  --fs-maxw: 1280px;
  --fs-pad-x: clamp(20px, 4vw, 56px);
  --fs-section-y: 100px;
  --fs-radius: 14px;
  --fs-radius-input: 10px;
  --fs-radius-pill: 999px;
  --fs-nav-h: 64px;

  /* Motion */
  --fs-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  @media (max-width: 720px) {
    --fs-section-y: 72px;
  }

  /* Mercury / shadcn variables, mapped onto the palette */
  --background: var(--fs-bg);
  --foreground: var(--fs-fg);
  --card: var(--fs-bg-elev);
  --card-foreground: var(--fs-fg);
  --primary: var(--fs-accent);
  --primary-foreground: var(--fs-on-accent);
  --secondary: var(--fs-bg-card);
  --secondary-foreground: var(--fs-fg);
  --muted: var(--fs-bg-card);
  --muted-foreground: var(--fs-fg-muted);
  --accent: var(--fs-accent-soft);
  --accent-foreground: var(--fs-on-accent);
  --destructive: var(--fs-error);
  --destructive-foreground: var(--fs-fg);
  --border: var(--fs-line-2);
  --input: var(--fs-line-2);
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --radius: var(--fs-radius);
  --shadow-2xs: 0 1px 3px 0 hsl(0 0% 0% / 0.3);
  --shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.3);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.4);
  --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 2px 6px 0 hsl(0 0% 0% / 0.4), 0 2px 4px -1px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 10px 40px -10px var(--fs-accent-glow);
  --shadow-xl: 0 20px 60px -20px hsl(0 0% 0% / 0.6);
  --shadow-2xl: 0 20px 60px -20px hsl(0 0% 0% / 0.6);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Mercury's hero billboard overlays the navbar by this much. */
  --navbar-height: var(--fs-nav-h);
}