:root{
  --topbar-bg: rgba(255,255,255,.84);
  --topbar-border: rgba(230,231,234,.8);
  --bg: #ffffff;
  --surface: #fff;
  --surface-soft: #fbfbfb;
  --text: #1a1a1a;
  --muted: #6b7280;
  --highlighted: #ffe58f;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --shadow-soft: 0 8px 18px rgba(0,0,0,.08);
  --radius: 18px;
  --accent: #ff6a00;
  --accent-soft: rgba(255,106,0,.12);

  --button-bg: #eaeaea;
  --button-hover: #dddddd;
  --button-border: #d5d5d5;

  --border: #e6e7ea;
  --border-focus: rgba(255, 106, 0, 0.37);
  --shadow-focus: rgba(255, 106, 0, 0.19);

  --font-large: 16px;
  --font-medium: 14px;
  --font-small: 12px;

  --sheet-bg: rgba(255,255,255,.92);
  --sheet-border: rgba(234,236,240,.92);
  --sheet-header-bg: rgba(255,255,255,.86);
  --sheet-header-border: rgba(234,236,240,.65);

  --reverse-bg: rgba(16,24,40,.90);
  --reverse-sub-bg: rgba(255,255,255,.12);
  --reverse-text: #ecedf1;
}

/* ===============================
       DARK MODE
=============================== */
@media (prefers-color-scheme: dark) {
  :root {
    --topbar-bg: rgb(11, 12, 15, .84);
    --topbar-border: rgba(35, 35, 35, 0.8);
    --bg: #0b0c0f;
    --surface: #111218;
    --surface-soft: #151720;
    --text: #ecedf1;
    --muted: #9ca3af;
    --highlighted: rgba(255, 229, 143, 0.52);
    --shadow: 0 14px 40px rgba(0,0,0,.55);
    --shadow-soft: 0 10px 24px rgba(0,0,0,.45);

    --accent: #ff8a3d;
    --accent-soft: rgba(255,138,61,.22);

    --button-bg: rgba(29, 41, 66, 0.9);
    --button-border: rgba(37, 52, 81, 0.9);

    --border: #26283a;
    --border-focus: rgba(255, 106, 0, 0.65);
    --shadow-focus: rgba(255, 106, 0, 0.37);

    --sheet-bg: rgba(16,24,40,.90);
    --sheet-border: rgba(22, 33, 58, 0.9);
    --sheet-header-bg: rgba(25, 36, 58, 0.9);
    --sheet-header-border: rgba(24, 35, 57, 0.9);

    --reverse-bg: rgba(154, 163, 181, 0.9);
    --reverse-sub-bg: rgba(205, 210, 221, 0.9);
    --reverse-text: #0e142b;
  }
}