/* ───────── TOKENS & MODES (light default; dark via [data-mode="dim"]) ───────── */
:root{
  /* Palette */
  --bg: #f8fafc;
  --fg: #101218;
  --muted: #5f6b7a;
  --heading: #0f172a;

  --brand: #5cc8ff;
  --brand-2: #8a7dff;
  --brand-strong: #087fa8;
  --accent: #ffaa00;

  /* Content surfaces */
  --surface: rgba(255,255,255,.88);
  --surface-solid: #ffffff;
  --surface-muted: #eef7fb;
  --surface-warm: #fff8e7;
  --border: rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.16);
  --shadow-soft: 0 18px 60px rgba(15,23,42,.10);
  --shadow-card: 0 16px 38px rgba(15,23,42,.08);

  /* Nav / surfaces */
  --nav-bg: rgba(255,255,255,.75);
  --nav-border: rgba(0,0,0,.06);
  --nav-link: rgba(0,0,0,.72);

  /* Dropdown (desktop & mobile) */
  --dd-bg: rgba(255,255,255,.98);
  --dd-border: rgba(0,0,0,.08);
  --dd-link: #111827;
  --dd-hover-bg: rgba(92,200,255,.14);
  --dd-hover: #0b1220;

  /* Background glow (fixed layer) */
  --glow-1: rgba(92,200,255,.10);
  --glow-2: rgba(138,125,255,.08);

  /* Layout */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.12);

  /* Tables / callouts */
  --table-bg: #fff;
  --table-haze: #f2f2f2;
  --table-border: #dedede;

  --notice-info-border-color: #6AB0DE;
  --notice-info-background: #E7F2FA;
  --notice-note-border-color: #F0B37E;
  --notice-note-background: #FFF2DB;
  --notice-tip-border-color: rgba(92,184,92,.8);
  --notice-tip-background: #E6F9E6;
  --notice-warning-border-color: rgba(217,83,79,.8);
  --notice-warning-background: #FAE2E2;

  /* Code */
  --code-bg: #0f1420;
}

/* Dark mode via attribute */
html[data-mode="dim"]{
  --bg: #0b0d12;
  --fg: #e7ecf4;
  --muted: #a7b0c0;
  --heading: #f8fafc;
  --brand-strong: #76d8ff;
  --accent: #ffc94a;
  --surface: rgba(17,24,39,.76);
  --surface-solid: #111827;
  --surface-muted: rgba(255,255,255,.07);
  --surface-warm: rgba(255,201,74,.10);
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.18);
  --shadow-soft: 0 22px 70px rgba(0,0,0,.34);
  --shadow-card: 0 18px 48px rgba(0,0,0,.28);

  --nav-bg: rgba(14,18,26,.55);
  --nav-border: rgba(255,255,255,.06);
  --nav-link: rgba(255,255,255,.78);

  --dd-bg: rgba(16,18,26,.94);
  --dd-border: rgba(255,255,255,.08);
  --dd-link: #e7ecf4;
  --dd-hover-bg: rgba(92,200,255,.16);
  --dd-hover: #ffffff;

  --glow-1: rgba(92,200,255,.18);
  --glow-2: rgba(138,125,255,.16);
  --table-bg: rgba(255,255,255,.06);
  --table-haze: rgba(255,255,255,.08);
  --table-border: rgba(255,255,255,.12);
}

/* Respect OS if user hasn’t forced a mode */
@media (prefers-color-scheme: dark){
  html:not([data-mode="lit"]){
    /* mirror dark tokens */
    --bg: #0b0d12;
    --fg: #e7ecf4;
    --muted: #a7b0c0;
    --heading: #f8fafc;
    --brand-strong: #76d8ff;
    --accent: #ffc94a;
    --surface: rgba(17,24,39,.76);
    --surface-solid: #111827;
    --surface-muted: rgba(255,255,255,.07);
    --surface-warm: rgba(255,201,74,.10);
    --border: rgba(255,255,255,.12);
    --border-strong: rgba(255,255,255,.18);
    --shadow-soft: 0 22px 70px rgba(0,0,0,.34);
    --shadow-card: 0 18px 48px rgba(0,0,0,.28);

    --nav-bg: rgba(14,18,26,.55);
    --nav-border: rgba(255,255,255,.06);
    --nav-link: rgba(255,255,255,.78);

    --dd-bg: rgba(16,18,26,.94);
    --dd-border: rgba(255,255,255,.08);
    --dd-link: #e7ecf4;
    --dd-hover-bg: rgba(92,200,255,.16);
    --dd-hover: #ffffff;

    --glow-1: rgba(92,200,255,.18);
    --glow-2: rgba(138,125,255,.16);
    --table-bg: rgba(255,255,255,.06);
    --table-haze: rgba(255,255,255,.08);
    --table-border: rgba(255,255,255,.12);
  }
}