/* ============ TOKENS — edit THIS file to rebrand an app (from the cooldesign palette) ============ */
:root{
  --ink:#0E1A2B; --bg:#F2F6FD; --surface:#FFFFFF; --surface-2:#E8F0FC;
  --primary:#2158E6; --primary-dark:#163FAE; --accent:#4F9DFF; --accent-soft:#E4EEFF;
  --grad-from:#2B6BF0; --grad-via:#1E50E0; --grad-to:#14307C; --on-grad:#FFFFFF;
  --muted:#5A6A86; --line:#DAE5F7; --btn:#2158E6; --btn-h:#163FAE;
  --ok:#0a8f5b; --warn:#b7791f; --danger:#c0392b;
  --shadow:0 18px 50px -20px rgba(14,26,43,.26); --shadow-sm:0 8px 24px -14px rgba(14,26,43,.28);
  --r-band:30px; --r-card:18px; --r-pill:999px; --wrap:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ink:#E9F1FF; --bg:#070C18; --surface:#111B2E; --surface-2:#0C1524;
  --primary:#5A8DF2; --primary-dark:#3E6FD6; --accent:#5FB0FF; --accent-soft:#16233C;
  --grad-from:#2B6BF0; --grad-via:#1E50E0; --grad-to:#2A1D7A; --on-grad:#FFFFFF;
  --muted:#93A3C0; --line:#1F2E47; --btn:#2A5FE0; --btn-h:#1E49B8;
  --shadow:0 18px 50px -20px rgba(0,0,0,.6); --shadow-sm:0 8px 24px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#E9F1FF; --bg:#070C18; --surface:#111B2E; --surface-2:#0C1524;
  --primary:#5A8DF2; --primary-dark:#3E6FD6; --accent:#5FB0FF; --accent-soft:#16233C;
  --grad-from:#2B6BF0; --grad-via:#1E50E0; --grad-to:#2A1D7A; --on-grad:#FFFFFF;
  --muted:#93A3C0; --line:#1F2E47; --btn:#2A5FE0; --btn-h:#1E49B8;
  --shadow:0 18px 50px -20px rgba(0,0,0,.6); --shadow-sm:0 8px 24px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* SVG paints via CSS so var() resolves in every browser */
svg [fill="var(--primary)"]{fill:var(--primary)} svg [fill="var(--accent)"]{fill:var(--accent)}
svg [stroke="var(--primary)"]{stroke:var(--primary)}
svg [stop-color="var(--grad-via)"]{stop-color:var(--grad-via)} svg [stop-color="var(--grad-to)"]{stop-color:var(--grad-to)} svg [stop-color="var(--primary)"]{stop-color:var(--primary)}