/* =============================================================================
   Ames design tokens
   -----------------------------------------------------------------------------
   Reusable theme layer for the Routing Map, and later for restyling other Ames
   surfaces (including the live command center at amgt.io) without rewriting
   components. Set data-theme="ion|frost|noir" on <html> and optionally
   ?theme=ion|frost|noir on the URL.

   Ion   — deep space, cyan / violet electrode glow
   Frost — light frosted glass, soft color (Apple-like)
   Noir  — warm premium black and gold (Archivo + Instrument Serif)
   ============================================================================= */

/* Shared typefaces (self-hosted, no runtime CDN) */
@font-face { font-family: Outfit; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/outfit-latin-400.woff2") format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/outfit-latin-500.woff2") format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/outfit-latin-600.woff2") format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/outfit-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-latin-400.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/archivo-latin-500.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/archivo-latin-600.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }

/* ---------------------------------------------------------------------------
   Ion — default. Deep-space dark, cyan and violet energy.
   --------------------------------------------------------------------------- */
:root,
html[data-theme="ion"] {
  color-scheme: dark;
  --theme-name: "Ion";
  --theme-tagline: "Deep space · cyan / violet glow";
  --theme-color: #070614;
  --background: 255 40% 3.5%;
  --foreground: 230 40% 94%;
  --card: 255 35% 7%;
  --card-foreground: 230 40% 94%;
  --popover: 255 32% 8%;
  --popover-foreground: 230 40% 94%;
  --primary: 192 100% 64%;
  --primary-foreground: 255 40% 6%;
  --secondary: 255 28% 11%;
  --secondary-foreground: 230 40% 94%;
  --muted: 255 22% 12%;
  --muted-foreground: 240 16% 62%;
  --accent: 262 55% 16%;
  --accent-foreground: 250 100% 82%;
  --destructive: 350 85% 64%;
  --destructive-foreground: 0 0% 98%;
  --warning: 32 95% 62%;
  --success: 162 80% 52%;
  --terminal: 192 100% 70%;
  --border: 255 24% 18%;
  --input: 255 22% 16%;
  --ring: 192 100% 64%;
  --radius: 0.85rem;
  --heading-weight: 600;
  --font-heading: Outfit, system-ui, sans-serif;
  --font-body: Outfit, system-ui, sans-serif;
  --font-display: Outfit, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --business-amgt: 192 100% 64%;
  --business-porch: 28 95% 68%;
  --business-bolo: 262 90% 78%;
  --business-rockwall: 44 90% 68%;
  --business-proofsheet: 220 90% 74%;
  --business-kalshi: 162 80% 62%;
  --business-clarence: 250 100% 82%;
  --glass-bg: hsl(255 40% 8% / 0.58);
  --glass-border: hsl(230 60% 80% / 0.14);
  --glass-highlight: hsl(230 100% 96% / 0.08);
  --glass-blur: 20px;
  --shadow-glass: 0 20px 50px -28px hsl(255 60% 2% / 0.85), inset 0 1px 0 hsl(230 100% 96% / 0.08);
  --canvas-image:
    radial-gradient(1000px 620px at 8% -8%, hsl(192 100% 50% / 0.16), transparent 58%),
    radial-gradient(900px 540px at 92% 0%, hsl(262 90% 50% / 0.18), transparent 55%),
    radial-gradient(700px 400px at 50% 110%, hsl(250 80% 40% / 0.10), transparent 50%),
    linear-gradient(180deg, #0b0918 0%, #070614 100%);
  --header-bg: hsl(255 40% 4% / 0.62);
  --electrode-width: 2.3;
  --electrode-glow-width: 14;
  --electrode-glow-opacity: 0.38;
  --header-h: 64px;
  --tabs-h: 52px;
  --banner-h: 0px;
  --ease: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   Frost — light frosted glass, soft pastel energy.
   --------------------------------------------------------------------------- */
html[data-theme="frost"] {
  color-scheme: light;
  --theme-name: "Frost";
  --theme-tagline: "Light frosted glass · soft color";
  --theme-color: #eef1f6;
  --background: 220 28% 95%;
  --foreground: 222 28% 12%;
  --card: 0 0% 100%;
  --card-foreground: 222 28% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 28% 12%;
  --primary: 198 72% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 24% 92%;
  --secondary-foreground: 222 28% 16%;
  --muted: 220 20% 91%;
  --muted-foreground: 220 10% 38%;
  --accent: 198 40% 92%;
  --accent-foreground: 198 72% 28%;
  --destructive: 0 72% 46%;
  --destructive-foreground: 0 0% 100%;
  --warning: 32 90% 38%;
  --success: 158 55% 30%;
  --terminal: 198 72% 36%;
  --border: 220 18% 82%;
  --input: 220 16% 86%;
  --ring: 198 72% 36%;
  --radius: 1rem;
  --heading-weight: 600;
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --business-amgt: 198 72% 36%;
  --business-porch: 24 80% 42%;
  --business-bolo: 262 48% 48%;
  --business-rockwall: 36 80% 40%;
  --business-proofsheet: 220 60% 42%;
  --business-kalshi: 158 50% 32%;
  --business-clarence: 250 40% 46%;
  --glass-bg: hsl(0 0% 100% / 0.58);
  --glass-border: hsl(220 30% 100% / 0.7);
  --glass-highlight: hsl(0 0% 100% / 0.85);
  --glass-blur: 24px;
  --shadow-glass: 0 18px 40px -24px hsl(220 30% 30% / 0.28), inset 0 1px 0 hsl(0 0% 100% / 0.9);
  --canvas-image:
    radial-gradient(900px 500px at 10% -10%, hsl(198 80% 80% / 0.45), transparent 55%),
    radial-gradient(800px 480px at 90% 0%, hsl(262 70% 84% / 0.4), transparent 50%),
    radial-gradient(700px 400px at 50% 100%, hsl(32 80% 86% / 0.3), transparent 50%),
    linear-gradient(180deg, #f5f7fb 0%, #e8edf4 100%);
  --header-bg: hsl(0 0% 100% / 0.55);
  --electrode-width: 2.4;
  --electrode-glow-width: 16;
  --electrode-glow-opacity: 0.28;
}

/* ---------------------------------------------------------------------------
   Noir — warm premium black and gold. Ames marketing type (Archivo) + serif.
   --------------------------------------------------------------------------- */
html[data-theme="noir"] {
  color-scheme: dark;
  --theme-name: "Noir";
  --theme-tagline: "Warm black · gold electrodes";
  --theme-color: #0c0a07;
  --background: 30 20% 4%;
  --foreground: 40 30% 92%;
  --card: 30 16% 7%;
  --card-foreground: 40 30% 92%;
  --popover: 30 16% 8%;
  --popover-foreground: 40 30% 92%;
  --primary: 40 62% 62%;
  --primary-foreground: 30 20% 8%;
  --secondary: 30 14% 11%;
  --secondary-foreground: 40 30% 92%;
  --muted: 30 12% 12%;
  --muted-foreground: 35 12% 58%;
  --accent: 30 30% 12%;
  --accent-foreground: 40 70% 72%;
  --destructive: 6 75% 58%;
  --destructive-foreground: 0 0% 98%;
  --warning: 32 90% 56%;
  --success: 150 40% 48%;
  --terminal: 40 62% 62%;
  --border: 30 12% 16%;
  --input: 30 12% 18%;
  --ring: 40 62% 62%;
  --radius: 0.7rem;
  --heading-weight: 400;
  --font-heading: "Instrument Serif", "Times New Roman", serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --business-amgt: 40 62% 62%;
  --business-porch: 24 80% 62%;
  --business-bolo: 28 30% 72%;
  --business-rockwall: 44 70% 58%;
  --business-proofsheet: 35 25% 70%;
  --business-kalshi: 150 35% 52%;
  --business-clarence: 40 40% 78%;
  --glass-bg: hsl(30 20% 8% / 0.62);
  --glass-border: hsl(40 50% 60% / 0.22);
  --glass-highlight: hsl(40 60% 80% / 0.1);
  --glass-blur: 18px;
  --shadow-glass: 0 22px 50px -26px hsl(30 40% 2% / 0.9), inset 0 1px 0 hsl(40 60% 80% / 0.1);
  --canvas-image:
    radial-gradient(900px 520px at 12% -12%, hsl(40 60% 40% / 0.14), transparent 55%),
    radial-gradient(800px 480px at 90% 8%, hsl(150 30% 20% / 0.14), transparent 50%),
    linear-gradient(180deg, #16110c 0%, #0c0a07 100%);
  --header-bg: hsl(30 20% 5% / 0.66);
  --electrode-width: 2.2;
  --electrode-glow-width: 13;
  --electrode-glow-opacity: 0.36;
}

/* Theme metadata helper (optional UI chrome) */
.theme-tagline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}