/* GENERATED by scripts/gen-tokens.mjs from docs/design-system/tokens.json — DO NOT EDIT. Run `npm run gen:tokens`. */
:root {
  --primary: 24 91% 54%;
  --primary-hsl: 24 91% 54%;
  --accent-orange: 24 91% 54%;
  --accent-orange-hsl: 24 91% 54%;
  --secondary-brand: 196 84% 46%;
  --secondary-brand-hsl: 196 84% 46%;
  --accent-blue: 196 84% 46%;
  --accent-blue-hsl: 196 84% 46%;
  --accent-cyan: 196 84% 46%;
  --accent-cyan-hsl: 196 84% 46%;
  --money: 82 100% 47%;
  --money-hsl: 82 100% 47%;
  --success: 82 100% 47%;
  --success-hsl: 82 100% 47%;
  --destructive: 0 84% 60%;
  --destructive-hsl: 0 84% 60%;
  --background: 0 0% 4%;
  --background-hsl: 0 0% 4%;
  --card: 224 52% 6%;
  --card-hsl: 224 52% 6%;
  --muted: 0 0% 9%;
  --muted-hsl: 0 0% 9%;
  --border: 0 0% 18%;
  --border-hsl: 0 0% 18%;
  --foreground: 0 0% 98%;
  --foreground-hsl: 0 0% 98%;
  --muted-foreground: 0 0% 65%;
  --muted-foreground-hsl: 0 0% 65%;
  --radius: 1.0625rem;
  --fox-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.8);
  --fox-shadow-hover: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.8), 0 0 30px -6px hsl(196 84% 46% / .45);
  --fox-shadow-cta: 0 0 24px -4px hsl(82 100% 47% / .55);
  --fox-shadow-active-nav: 0 0 18px -4px hsl(24 91% 54% / .55);
  --fox-shadow-accent: var(--fox-shadow);
  --fox-shadow-trust: var(--fox-shadow);
  --fox-shadow-success: var(--fox-shadow);
  --fox-shadow-premium: var(--fox-shadow);
  --warning: #F59E0B;
  --info: #11A2DA;
  --positive-print: #356B00;
  --chart-1: #5F6472;
  --chart-2: #94A3B8;
  --chart-3: #475569;
}

/* Foxfire standalone dark theme — component layer. Tokens come from the generated :root above. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Press+Start+2P&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; }
h3, h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 600; line-height: 1.2; }

/* Card / tile — REST: neutral border + depth shadow, NO colored halo. HOVER: blue. */
.foxfire-tile {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--background)) 100%);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--fox-shadow);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.foxfire-tile:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--secondary-brand) / 0.45);
  box-shadow: var(--fox-shadow-hover);
}

/* Brand divider — orange/blue/lime only (no purple) */
.foxfire-divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent,
    hsl(var(--secondary-brand) / 0.18) 18%,
    hsl(var(--primary) / 0.34) 50%,
    hsl(var(--money) / 0.22) 82%, transparent);
}

/* Orange display pill */
.foxfire-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 18px; padding: 0.9rem 1.25rem 0.82rem;
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase; line-height: 1.2;
  border: 1px solid hsl(var(--primary) / 0.42);
  background: hsl(var(--primary) / 0.10); color: hsl(var(--primary));
}

/* Buttons: primary = orange, CTA = green glow */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: calc(var(--radius) - 6px);
  padding: 0.75rem 1.25rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.btn-primary { background: hsl(var(--primary)); color: #fff; }
.btn-cta { background: hsl(var(--money)); color: #0A0A0A; box-shadow: var(--fox-shadow-cta); }
.btn-ghost { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-ghost:hover { border-color: hsl(var(--secondary-brand) / 0.45); }

/* Comparison/categorical: Foxfire pops in orange, competitors are muted neutrals */
.chart-foxfire { color: hsl(var(--primary)); }
.chart-alt-1 { color: var(--chart-1); }
.chart-alt-2 { color: var(--chart-2); }
.chart-alt-3 { color: var(--chart-3); }

/* Top hairline strip (optional, cyan->lime) */
.fox-top-strip { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, hsl(var(--secondary-brand)), hsl(var(--money))); }