:root{ color-scheme: light dark; }

/* -------------------------
   LIGHT (default)
------------------------- */
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --card:#ffffff;
  --ink:#0b0e13;
  --mut:#606a78;
  --line:#dbe1ea;

  --chip:#ffffff;
  --hover:rgba(0,0,0,.06);

  --brand:#1666d9;
  --blue:#1666d9;

  --input-bg:#ffffff;
  --input-ink:#0b0e13;
  --input-line:#cbd5e1;

  --on-media:#ffffff;

  --seek:#e91e63;

  --header-h:56px;
  --player-h:56.25vw;

  --sidebar-w:360px;
  --content-max:1600px;

  --glass: rgba(18,22,33,.72);
  --glass2: rgba(18,22,33,.90);
  --glass-line: rgba(255,255,255,.14);
  --shadow: 0 18px 44px rgba(0,0,0,.38);
}

/* -------------------------
   DARK (explicit)
   This is the missing piece.
------------------------- */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0b0e13;
  --panel:#121621;
  --card:#121621;
  --ink:#eaeef5;
  --mut:#9aa4b2;
  --line:#232a36;

  --chip:#0d1117;
  --hover:rgba(255,255,255,.06);

  --brand:#4b9cff;
  --blue:#4b9cff;

  --input-bg:#0f1422;
  --input-ink:#eaeef5;
  --input-line:#2a3242;

  --on-media:#eaeef5;

  /* ✅ light glass */
  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.90);
  --glass-line: rgba(0,0,0,.10);
  --shadow: 0 18px 44px rgba(0,0,0,.12);
}

/* Explicit light (optional, but nice for clarity) */
:root[data-theme="light"]{
  color-scheme: light;
}

/* -------------------------
   AUTO fallback (only when JS doesn't set data-theme)
------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    color-scheme: dark;

    --bg:#0b0e13;
    --panel:#121621;
    --card:#121621;
    --ink:#eaeef5;
    --mut:#9aa4b2;
    --line:#232a36;

    --chip:#0d1117;
    --hover:rgba(255,255,255,.06);

    --brand:#4b9cff;
    --blue:#4b9cff;

    --input-bg:#0f1422;
    --input-ink:#eaeef5;
    --input-line:#2a3242;

    --on-media:#eaeef5;

    --glass: rgba(10,12,18,.62);
    --glass2: rgba(10,12,18,.88);
    --glass-line: rgba(255,255,255,.12);
    --shadow: 0 18px 44px rgba(0,0,0,.48);
  }
}
