/* Shared design tokens for every TechDrift surface (app, legal pages, story pages). */
:root{
  color-scheme:dark;
  --bg:#0b1118;--surface:#121b25;--raised:#202c38;--fg:#e8eef5;--muted:#b2bfcc;
  --accent:#72d5c5;--accent-strong:#b5f2e8;--border:#3a4b5a;--pill:#16443f;--pill-text:#b5f2e8;
  --danger:#542e35;--danger-text:#ffdad9;--up:#63d7a0;--down:#ff7d84;--warm:#ffca80;
  --glow:color-mix(in srgb,var(--accent) 13%,transparent);
  --hairline:color-mix(in srgb,var(--border) 42%,transparent);
}
/* Pages with no theme-sync script (cross-origin from the app, e.g. the landing page)
   fall back to the OS preference. Pages that set data-theme explicitly always win
   below, since that rule is more specific than this media-gated one. */
@media(prefers-color-scheme:light){
  :root:not([data-theme]){
    color-scheme:light;
    --bg:#f3f6f7;--surface:#fff;--raised:#e6ecef;--fg:#17212b;--muted:#4b5a66;
    --accent:#176b61;--accent-strong:#0c3731;--border:#9baab4;--pill:#d0f1ea;--pill-text:#0c3731;
    --danger:#ffdad9;--danger-text:#410e12;--up:#0f6b45;--down:#b3261e;--warm:#a15c00;
    --glow:color-mix(in srgb,var(--accent) 9%,transparent);
    --hairline:color-mix(in srgb,var(--border) 50%,transparent);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f6f7;--surface:#fff;--raised:#e6ecef;--fg:#17212b;--muted:#4b5a66;
  --accent:#176b61;--accent-strong:#0c3731;--border:#9baab4;--pill:#d0f1ea;--pill-text:#0c3731;
  --danger:#ffdad9;--danger-text:#410e12;--up:#0f6b45;--down:#b3261e;--warm:#a15c00;
  --glow:color-mix(in srgb,var(--accent) 9%,transparent);
  --hairline:color-mix(in srgb,var(--border) 50%,transparent);
}

/* Independent product art direction for the shared-engine brands. */
body[data-brand="sportsdrift"],body.brand-sportsdrift{
  --bg:#08121d;--surface:#101e2a;--raised:#172b38;--fg:#f2f5f3;--muted:#aabac4;
  --accent:#f06b4f;--accent-strong:#ffb26f;--border:#39515d;--pill:#472a25;--pill-text:#ffd2b6;
  --warm:#b8dc68;--up:#a8e078;--down:#ff796f;
  --glow:color-mix(in srgb,var(--accent) 18%,transparent);
  --hairline:color-mix(in srgb,var(--border) 55%,transparent);
  --heading-font:'Oswald',system-ui,sans-serif;
}
body[data-brand="gamingdrift"],body.brand-gamingdrift{
  --bg:#0b0914;--surface:#151122;--raised:#211a32;--fg:#f4f0ff;--muted:#b6aecb;
  --accent:#aa8bff;--accent-strong:#d0c1ff;--border:#493b68;--pill:#342653;--pill-text:#e0d3ff;
  --warm:#4ce0d0;--up:#62e5b0;--down:#ff6eaa;
  --glow:color-mix(in srgb,var(--accent) 20%,transparent);
  --hairline:color-mix(in srgb,var(--border) 58%,transparent);
  --heading-font:'Space Grotesk',system-ui,sans-serif;
}

/* Headline typeface, every surface that loads theme.css (app shell, landing,
   story pages). Body copy stays on the system-font stack on purpose --
   this is a voice change on headings, not a full font swap that would cost
   legibility or page weight. TechDrift has no --heading-font override above,
   so this rule resolves to `inherit` for it -- a true no-op. */
h1,.topic-open,.brand strong,.topic-hero-title,.overview h1,.panel h2,
.hero h1,.mock-label,.brand-copy strong{
  font-family:var(--heading-font,inherit);
}

/* Shape language, carried from the landing pages (where it already shipped)
   into the app shell itself, so the product doesn't go flat the moment a
   GamingDrift/SportsDrift user leaves the marketing page for the real app.
   Same two classes of differentiation as the landing hero/mock treatment:
   SportsDrift reads sharper and more structural; GamingDrift reads rounder
   and glowier. Both scoped narrowly to shared component classes, not new
   markup -- nothing here can diverge app structure between brands. */
body[data-brand="sportsdrift"] .panel,body[data-brand="sportsdrift"] .overview,
body[data-brand="sportsdrift"] .topic-hero,body[data-brand="sportsdrift"] .history-entry,
body[data-brand="sportsdrift"] .auth-gate{
  border-radius:8px;
}
body[data-brand="sportsdrift"] .badge,body[data-brand="sportsdrift"] .relevance-chip,
body[data-brand="sportsdrift"] .flair-chip,body[data-brand="sportsdrift"] .sort-pills,
body[data-brand="sportsdrift"] .sort-pill{
  border-radius:6px;
}
body[data-brand="sportsdrift"] .topic-hero{
  border-top:3px solid var(--accent);
}
body[data-brand="sportsdrift"] .topic-hero-title,body[data-brand="sportsdrift"] h1{
  text-transform:uppercase;letter-spacing:-.01em;
}

body[data-brand="gamingdrift"] .panel,body[data-brand="gamingdrift"] .overview,
body[data-brand="gamingdrift"] .topic-hero,body[data-brand="gamingdrift"] .history-entry,
body[data-brand="gamingdrift"] .auth-gate{
  border-radius:16px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 10%,transparent);
}
body[data-brand="gamingdrift"] .topic-glyph,body[data-brand="gamingdrift"] .source-logo{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);
}