/* ULEO Lessons · colours for night mode (default) and day mode
   Every page uses these names instead of fixed colours. Night = the ULEO brand
   (dark navy). Day = light background with deeper versions of the same colours,
   so the teaching colour codes stay readable on white.
   The mode is chosen by /assets/theme.js (saved choice, otherwise the device setting). */
:root{
  color-scheme: dark;
  --bg:#05121f;
  --glow-a:#0a2a28;
  --glow-b:#0a1f3a;
  --text:rgba(255,255,255,.92);
  --text-2:rgba(255,255,255,.75);
  --strong:#ffffff;
  --muted:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.4);
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.07);
  --panel-3:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --field:rgba(0,0,0,.25);
  --inset:rgba(0,0,0,.2);     /* boxes inside cards */
  --field-solid:#0b1c2c;
  --topbar:rgba(5,18,31,.86);
  --scan:rgba(0,0,0,.04);
  --teal:#2dd4bf;           /* ULEO brand teal */
  --teal-soft:rgba(45,212,191,.12);
  --teal-line:rgba(45,212,191,.35);
  --on-teal:#04201c;        /* text on a teal button */
  --blue:#60a5fa;
  --blue-ink:#93c5fd;
  --blue-soft:rgba(96,165,250,.14);
  --blue-line:rgba(96,165,250,.4);
  --amber:#fbbf24;          /* tips, ratings, "waiting" */
  --amber-fill:#fbbf24;     /* badges with dark text */
  --amber-soft:rgba(251,191,36,.08);
  --amber-line:rgba(251,191,36,.32);
  --coral:#fb7185;          /* wrong answers, delete */
  --coral-soft:rgba(251,113,133,.1);
  --coral-line:rgba(251,113,133,.35);
  --ink:#05121f;            /* dark text on bright fills (amber badges) */
  --heading-start:#ffffff;  /* gradient headings start colour */
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f4f7fb;
  --glow-a:#d7f3ee;
  --glow-b:#dce8fb;
  --text:#0f172a;
  --text-2:#334155;
  --strong:#0b1220;
  --muted:#475569;
  --faint:#64748b;
  --panel:#ffffff;
  --panel-2:#eef2f7;
  --panel-3:#e2e8f0;
  --line:#dde4ec;
  --line-2:#c5cfda;
  --field:#ffffff;
  --inset:#eef2f7;
  --field-solid:#ffffff;
  --topbar:rgba(244,247,251,.92);
  --scan:transparent;
  --teal:#0f766e;
  --teal-soft:rgba(15,118,110,.1);
  --teal-line:rgba(15,118,110,.35);
  --on-teal:#ffffff;
  --blue:#1d4ed8;
  --blue-ink:#1d4ed8;
  --blue-soft:rgba(29,78,216,.09);
  --blue-line:rgba(29,78,216,.32);
  --amber:#b45309;
  --amber-fill:#fbbf24;
  --amber-soft:rgba(217,119,6,.09);
  --amber-line:rgba(180,83,9,.32);
  --coral:#e11d48;
  --coral-soft:rgba(225,29,72,.07);
  --coral-line:rgba(225,29,72,.32);
  --ink:#05121f;
  --heading-start:#0b1220;
}

/* Exact night shades used on the home page and teacher dashboard (so night mode looks
   exactly as before), each with its day equivalent. */
:root{
  --amber-line-3:rgba(251,191,36,.3);
  --amber-line-35:rgba(251,191,36,.35);
  --amber-soft-05:rgba(251,191,36,.05);
  --amber-soft-06:rgba(251,191,36,.06);
  --amber-soft-07:rgba(251,191,36,.07);
  --amber-soft-1:rgba(251,191,36,.1);
  --amber-soft-12:rgba(251,191,36,.12);
  --blue-soft-18:rgba(96,165,250,.18);
  --coral-line-3:rgba(251,113,133,.3);
  --coral-soft-12:rgba(251,113,133,.12);
  --faint-45:rgba(255,255,255,.45);
  --field-2:rgba(0,0,0,.2);
  --line-07:rgba(255,255,255,.07);
  --line-08:rgba(255,255,255,.08);
  --line-2-12:rgba(255,255,255,.12);
  --muted-5:rgba(255,255,255,.5);
  --muted-55:rgba(255,255,255,.55);
  --muted-6:rgba(255,255,255,.6);
  --panel-02:rgba(255,255,255,.02);
  --panel-04:rgba(255,255,255,.04);
  --panel-2-06:rgba(255,255,255,.06);
  --panel-2-08:rgba(255,255,255,.08);
  --panel-3-1:rgba(255,255,255,.1);
  --teal-line-3:rgba(45,212,191,.3);
  --teal-line-4:rgba(45,212,191,.4);
  --teal-soft-08:rgba(45,212,191,.08);
  --teal-soft-1:rgba(45,212,191,.1);
  --teal-soft-14:rgba(45,212,191,.14);
  --text-2-7:rgba(255,255,255,.7);
  --text-2-8:rgba(255,255,255,.8);
  --text-85:rgba(255,255,255,.85);
  --text-9:rgba(255,255,255,.9);
  --on-teal-ink:#05121f;
}
:root[data-theme="light"]{
  --amber-line-3:var(--amber-line);
  --amber-line-35:var(--amber-line);
  --amber-soft-05:var(--amber-soft);
  --amber-soft-06:var(--amber-soft);
  --amber-soft-07:var(--amber-soft);
  --amber-soft-1:var(--amber-soft);
  --amber-soft-12:var(--amber-soft);
  --blue-soft-18:var(--blue-soft);
  --coral-line-3:var(--coral-line);
  --coral-soft-12:var(--coral-soft);
  --faint-45:var(--faint);
  --field-2:var(--inset);
  --line-07:var(--line);
  --line-08:var(--line);
  --line-2-12:var(--line-2);
  --muted-5:var(--muted);
  --muted-55:var(--muted);
  --muted-6:var(--muted);
  --panel-02:var(--panel);
  --panel-04:var(--panel);
  --panel-2-06:var(--panel-2);
  --panel-2-08:var(--panel-2);
  --panel-3-1:var(--panel-3);
  --teal-line-3:var(--teal-line);
  --teal-line-4:var(--teal-line);
  --teal-soft-08:var(--teal-soft);
  --teal-soft-1:var(--teal-soft);
  --teal-soft-14:var(--teal-soft);
  --text-2-7:var(--text-2);
  --text-2-8:var(--text-2);
  --text-85:var(--text);
  --text-9:var(--text);
  --on-teal-ink:#ffffff;
}

html{background:var(--bg)}

/* the ☀ / 🌙 button */
.theme-btn{font:inherit;font-size:16px;line-height:1;width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);cursor:pointer;display:inline-grid;place-items:center}
.theme-btn:hover{border-color:var(--teal-line)}
.theme-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.top-tools{display:flex;align-items:center;gap:8px}
.theme-btn.floating{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:50}