/* Canonical brand color tokens, shared by the in-app product (public/app.html),
   the marketing landing page (app/page.module.css), and the legal pages
   (app/legal-shared.tsx). Change a brand color here first.
   - app/layout.tsx links this file site-wide, so page.module.css and
     legal-shared.tsx inherit these via the cascade with no local copy.
   - public/app.html links this file too, then locally overrides only the
     values it intentionally renders differently (see the comment above its
     own :root block) and adds its light-theme variants on top. */
:root{
  --blue:#5b8def; --blue-2:#7aa8ff;
  --orange:#f2a65a; --orange-2:#ffb877;
  --violet:#8e5bef; --violet-2:#a97bff;
  --green:#4caf7d; --green-2:#63d29a;
  --red:#e0616b; --red-2:#ff8a9c;
  --teal:#2bb3b3; --teal-2:#4fd1d1;
  --bg:#0a0c16; --card:#161a2e; --card2:#1b2036; --inset:#10142a;
  --text:#f2f3f7; --muted:#9aa0b4; --faint:#6b7288; --thai:#ffb877;
  --line:rgba(255,255,255,.08);
  --card-glow:#1d2138;
  /* Text/icon color for content sitting directly on a hue's own gradient
     (e.g. background:linear-gradient(var(--blue-2),var(--blue))) — white
     fails contrast against the lighter "-2" stop in both themes (that stop
     is a mid-tone, not a pastel). Each on-X is picked dark enough to clear
     4.5:1 against the lightest stop either theme produces for that hue.
     -soft is for secondary text on the same surface (kept to --on-blue's
     family since blue/violet is the only surface with a two-tier CTA today). */
  --on-blue:#071b33; --on-blue-soft:#17335a;
  --on-orange:#3a2308; --on-violet:#200a38; --on-red:#330a12;
  --on-green:#08210f; --on-teal:#06282a;
  /* RGB triples (no alpha) for each hue above, so a translucent wash/glow/tint
     can write rgba(var(--blue-rgb),.14) instead of a hardcoded rgba(91,141,239,.14)
     — the hardcoded form freezes at this theme's numbers and stays wrong after
     the text/border next to it (already on the var() token) flips to the other
     theme's color. Keep each pair in sync with the hex token above it. */
  --blue-rgb:91,141,239; --blue-2-rgb:122,168,255;
  --orange-rgb:242,166,90; --orange-2-rgb:255,184,119;
  --violet-rgb:142,91,239; --violet-2-rgb:169,123,255;
  --green-rgb:76,175,125; --green-2-rgb:99,210,154;
  --red-rgb:224,97,107; --red-2-rgb:255,138,156;
  --teal-rgb:43,179,179; --teal-2-rgb:79,209,209;
}
/* System light mode — the landing page and legal pages have no manual
   theme toggle, so they follow the OS/browser preference (public/app.html
   has its own toggle and keeps its light values locally, see there). */
@media (prefers-color-scheme: light){
  :root{
    --blue:#3f6fd6; --blue-2:#5b8def;
    --orange:#c97a1f; --orange-2:#e08a2b;
    --violet:#7245cf; --violet-2:#8e5bef;
    --green:#1f8a52; --green-2:#2fa868;
    --red:#c23a4c; --red-2:#d94f61;
    --teal:#1a8f8f; --teal-2:#26aaaa;
    --bg:#f4f5fa; --card:#ffffff; --card2:#eef0f7; --inset:#eceef6;
    --text:#161a2c; --muted:#585e77; --faint:#666c88; --thai:#94510f;
    --line:rgba(20,22,38,.08);
    --card-glow:#e9ebf5;
    --blue-rgb:63,111,214; --blue-2-rgb:91,141,239;
    --orange-rgb:201,122,31; --orange-2-rgb:224,138,43;
    --violet-rgb:114,69,207; --violet-2-rgb:142,91,239;
    --green-rgb:31,138,82; --green-2-rgb:47,168,104;
    --red-rgb:194,58,76; --red-2-rgb:217,79,97;
    --teal-rgb:26,143,143; --teal-2-rgb:38,170,170;
  }
}