/* Bluefin theme layer, shared by every page (dashboard, onboarding, legal, connect).
   docs/design-system.md §Selectable themes is the source of truth; site/theme.js applies the saved
   theme before first paint. A page's own stylesheet uses these tokens and themes nothing else.

   Fonts are SELF-HOSTED (site/fonts, OFL, see fonts/OFL.txt). A visitor's browser never contacts
   Google: the privacy policy names AWS as the only processor, and a fonts.googleapis.com request
   hands every visitor's IP to Google. @font-face is lazy by spec (a face downloads only when
   rendered text uses it), so declaring all eight costs nothing for a theme that doesn't use them. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-var.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/manrope-var.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/space-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/jetbrains-mono-500.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/playfair-display-600.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/nunito-800.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/barlow-condensed-700.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/source-serif-4-600.woff2") format("woff2")}

:root{color-scheme:dark}
[data-theme="bloom"],[data-theme="studio"]{color-scheme:light}

/* Tokens — see docs/design-system.md §Themes. Every theme's status colours are VALIDATED with
   scripts/validate_theme_palettes.py against THAT theme's real panel surfaces (WCAG contrast +
   CIEDE2000 separation), never eyeballed and never carried over from another surface. Status is
   never rendered as colour alone — every badge carries a word (SCAM, OFF-BRAND, POSITIVE). */

/* ── Theme 1 · Deep Signal (default) — analyst/news/tech-commentary creators ──────────────── */
:root,[data-theme="signal"]{
  --page:#0b0f14; --panel:#121821; --panel2:#0f151d; --line:#1e2733; --line-strong:#2c3a4d;
  --ink:#e6edf3; --ink2:#8b98a8; --dim:#778393;
  --accent:#58a6ff; --accent-ink:#08131f;
  /* critical was #d03b3b — 3.71:1 on --panel, below the 4.5 bar it needs as BADGE TEXT
     ("SCAM", "IMPERSONATOR") and as .err copy. #e5484d is 4.55:1 and still separates from
     serious by ΔE00 16.4, so the fix costs nothing in distinguishability. */
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#e5484d;
  --critical-ink:#2a0606; --warn-ink:#1a1400;
  --hover:rgba(255,255,255,.02); --veil:rgba(11,15,20,.86);
  --ring:rgba(88,166,255,.15); --sweep:rgba(88,166,255,.7);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Manrope + Inter since 2026-10-03 (was the system stack): self-hosted, so the default pays
     ~73 KB of same-origin fonts with font-display:swap, not a third-party request. */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Manrope","Inter",-apple-system,"Segoe UI",sans-serif;
  --display-w:780; --display-ls:-.025em; --display-scale:1;
}
/* ── Theme 2 · Arcade Midnight — gaming / esports / streamers ─────────────────────────────── */
[data-theme="arcade"]{
  --page:#08070f; --panel:#12111d; --panel2:#0e0d17; --line:#272343; --line-strong:#3d3766;
  --ink:#ececf8; --ink2:#9d99bb; --dim:#7e7a9f;
  --accent:#a78bfa; --accent-ink:#0d0a1a;
  --good:#2fbf3f; --warn:#fab219; --serious:#f0875a; --critical:#ff5b62;
  --critical-ink:#2a0606; --warn-ink:#1a1400;
  --hover:rgba(167,139,250,.06); --veil:rgba(8,7,15,.88);
  --ring:rgba(167,139,250,.2); --sweep:rgba(167,139,250,.8);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk","Inter",-apple-system,"Segoe UI",sans-serif;
  --display-w:700; --display-ls:-.015em; --display-scale:1;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ── Theme 3 · Atelier Noir — beauty / fashion / lifestyle (dark editorial) ───────────────── */
[data-theme="atelier"]{
  --page:#14100f; --panel:#1e1817; --panel2:#191312; --line:#352b2a; --line-strong:#4d3d3b;
  --ink:#f4ece8; --ink2:#bda8a2; --dim:#937f79;
  --accent:#e3a3bf; --accent-ink:#1a0d13;
  --good:#3fae43; --warn:#f0b83f; --serious:#ef8f6a; --critical:#f4606a;
  --critical-ink:#2a0606; --warn-ink:#1f1500;
  --hover:rgba(255,255,255,.03); --veil:rgba(20,16,15,.88);
  --ring:rgba(227,163,191,.2); --sweep:rgba(227,163,191,.75);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --display-w:600; --display-ls:-.01em; --display-scale:1.06;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ── Theme 4 · Bloom Daylight — wellness / lifestyle / beauty (light, warm) ───────────────── */
[data-theme="bloom"]{
  --page:#f7f1ec; --panel:#fffbf8; --panel2:#f3ebe4; --line:#e5d8d0; --line-strong:#cbb7ab;
  --ink:#2b2226; --ink2:#5e4f54; --dim:#76656b;
  --accent:#b02b63; --accent-ink:#fffbf8;
  /* Light-surface status hues are RE-DERIVED, not reused: #fab219 is 1.8:1 on a cream plane. */
  --good:#12722b; --warn:#6f6200; --serious:#9c5412; --critical:#a61b1b;
  --critical-ink:#fffbf8; --warn-ink:#fffbf8;
  --hover:rgba(43,34,38,.035); --veil:rgba(247,241,236,.9);
  --ring:rgba(176,43,99,.18); --sweep:rgba(176,43,99,.7);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Nunito","Inter",-apple-system,"Segoe UI",sans-serif;
  --display-w:800; --display-ls:-.015em; --display-scale:1;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ── Theme 5 · Tempo — fitness / sport / coaching ─────────────────────────────────────────── */
[data-theme="tempo"]{
  --page:#0a1113; --panel:#101a1d; --panel2:#0d1618; --line:#1f3034; --line-strong:#2e474d;
  --ink:#e8f1f2; --ink2:#93a8ac; --dim:#72868b;
  --accent:#22d3ee; --accent-ink:#04191e;
  --good:#1fae3a; --warn:#f5b31c; --serious:#f08a5c; --critical:#fb5d63;
  --critical-ink:#2a0606; --warn-ink:#1a1400;
  --hover:rgba(34,211,238,.05); --veil:rgba(10,17,19,.88);
  --ring:rgba(34,211,238,.18); --sweep:rgba(34,211,238,.8);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow Condensed","Inter",-apple-system,"Segoe UI",sans-serif;
  --display-w:700; --display-ls:0em; --display-scale:1.2;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ── Theme 6 · Studio Paper — tech-education / long-form / podcast (light, editorial) ─────── */
[data-theme="studio"]{
  --page:#f4f2ed; --panel:#ffffff; --panel2:#f7f5f0; --line:#e1ddd4; --line-strong:#c3bdb0;
  --ink:#1c1a17; --ink2:#5b564d; --dim:#726c62;
  --accent:#0b5cb8; --accent-ink:#ffffff;
  --good:#12722b; --warn:#6f6200; --serious:#9c5412; --critical:#a61b1b;
  --critical-ink:#ffffff; --warn-ink:#ffffff;
  --hover:rgba(28,26,23,.035); --veil:rgba(244,242,237,.9);
  --ring:rgba(11,92,184,.18); --sweep:rgba(11,92,184,.7);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --display-w:600; --display-ls:-.01em; --display-scale:1.06;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Shared typographic defaults: balanced headings (no one-word last line) and pretty paragraphs. */
h1,h2,h3,.title{text-wrap:balance}
p,li{text-wrap:pretty}
/* A class that sets `display` beats the `hidden` attribute; this makes `hidden` always win. */
[hidden]{display:none!important}

/* "Developed with YouTube" badge (index + onboarding footers). The official PNGs are used as-is,
   never cropped or recoloured: white text on the dark themes, dark text on the light ones. At 96px
   the "YouTube" wordmark renders ~20px tall; the negative margin only reclaims the transparent
   clear space built into the file, so the footer doesn't grow by it. */
.yt-attrib{line-height:0;margin:-18px 0 -22px}
.yt-attrib img{height:96px;width:auto}
.yt-attrib .on-light,
[data-theme="bloom"] .yt-attrib .on-dark,[data-theme="studio"] .yt-attrib .on-dark{display:none}
[data-theme="bloom"] .yt-attrib .on-light,[data-theme="studio"] .yt-attrib .on-light{display:inline}