/* ============ TOKENS — edit THIS file to rebrand an app (from the cooldesign palette) ============ */
:root{
  --ink:#0E1A1C; --bg:#F4F8F7; --surface:#FFFFFF; --surface-2:#EAF1EF;
  --primary:#0A6C64; --primary-dark:#064B44; --accent:#C4972E; --accent-soft:#F6EACF;
  --grad-from:#0C7A6E; --grad-via:#1B5AA6; --grad-to:#6E2FB8; --on-grad:#FFFFFF;
  --muted:#54676A; --line:#DBE6E3; --btn:#0A6C64; --btn-h:#064B44;
  --ok:#0a8f5b; --warn:#b7791f; --danger:#c0392b;
  --shadow:0 18px 50px -20px rgba(14,26,28,.26); --shadow-sm:0 8px 24px -14px rgba(14,26,28,.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:#EAF3F1; --bg:#08110F; --surface:#10201D; --surface-2:#0C1917;
  --primary:#33B7A8; --primary-dark:#249083; --accent:#E0B451; --accent-soft:#2A2415;
  --grad-from:#0C7A6E; --grad-via:#1E5FAD; --grad-to:#7A38C6; --on-grad:#FFFFFF;
  --muted:#93A6A2; --line:#22332F; --btn:#0C6E63; --btn-h:#0A574F;
  --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:#EAF3F1; --bg:#08110F; --surface:#10201D; --surface-2:#0C1917;
  --primary:#33B7A8; --primary-dark:#249083; --accent:#E0B451; --accent-soft:#2A2415;
  --grad-from:#0C7A6E; --grad-via:#1E5FAD; --grad-to:#7A38C6; --on-grad:#FFFFFF;
  --muted:#93A6A2; --line:#22332F; --btn:#0C6E63; --btn-h:#0A574F;
  --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)}