/* ==================================================
   THEME: DARK
================================================== */

body.theme-dark {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted-text: #555;
  --border: #d1d5db;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --focus: #facc15;
}

@media (prefers-color-scheme: dark) {
  body.theme-dark {
    --bg: #121212;
    --surface: #1e1e1e;
    --text: #f1f1f1;
    --muted-text: #b5b5b5;
    --border: #333;

    --primary: #4da3ff;
    --primary-hover: #79bbff;

    --focus: #ffd166;
  }
}

/* ==================================================
   THEME: SEPIA
================================================== */

body.theme-sepia {
  --bg: #f4ecd8;
  --surface: #fff8e6;
  --text: #3b2f1e;
  --muted-text: #6b5b44;
  --border: #e0d2b8;

  --primary: #8b5a2b;
  --primary-hover: #6f451f;

  --focus: #ffb703;
}

@media (prefers-color-scheme: dark) {
  body.theme-sepia {
    --bg: #2a2116;
    --surface: #352a1d;
    --text: #f3e8d3;
    --muted-text: #c8b89a;
    --border: #4a3a26;

    --primary: #e6a15a;
    --primary-hover: #f0b97a;

    --focus: #ffd166;
  }
}

/* ==================================================
   THEME: OCEAN
================================================== */

body.theme-ocean {
  --bg: #eaf6fb;
  --surface: #ffffff;
  --text: #0f2a3d;
  --muted-text: #4c6b82;
  --border: #c7ddea;

  --primary: #0077b6;
  --primary-hover: #023e8a;

  --focus: #ffb703;
}

@media (prefers-color-scheme: dark) {
  body.theme-ocean {
    --bg: #0b1f2a;
    --surface: #102a3a;
    --text: #e6f1f7;
    --muted-text: #a7c3d6;
    --border: #1f4258;

    --primary: #4dabf7;
    --primary-hover: #74c0fc;

    --focus: #ffd166;
  }
}

/* ==================================================
   THEME: FOREST
================================================== */

body.theme-forest {
  --bg: #eef4ef;
  --surface: #ffffff;
  --text: #1f3d2b;
  --muted-text: #4f6f5d;
  --border: #cddfd4;

  --primary: #2d6a4f;
  --primary-hover: #1b4332;

  --focus: #ffd166;
}

@media (prefers-color-scheme: dark) {
  body.theme-forest {
    --bg: #0f1f18;
    --surface: #162a22;
    --text: #e3f3eb;
    --muted-text: #9fc5b2;
    --border: #244437;

    --primary: #52b788;
    --primary-hover: #74c69d;

    --focus: #ffe066;
  }
}

/* ==================================================
   THEME: SUNSET
================================================== */

body.theme-sunset {
  --bg: #fff1eb;
  --surface: #ffffff;
  --text: #3a1c1c;
  --muted-text: #7a4a4a;
  --border: #f1c6b8;

  --primary: #e85d04;
  --primary-hover: #d9480f;

  --focus: #ffd166;
}

@media (prefers-color-scheme: dark) {
  body.theme-sunset {
    --bg: #2b1412;
    --surface: #3a1c18;
    --text: #ffe8df;
    --muted-text: #e0b4a8;
    --border: #5a2a23;

    --primary: #ff922b;
    --primary-hover: #ffa94d;

    --focus: #ffe066;
  }
}

/* ==================================================
   THEME: SLATE
================================================== */

body.theme-slate {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --muted-text: #475569;
  --border: #cbd5e1;

  --primary: #334155;
  --primary-hover: #1e293b;

  --focus: #facc15;
}

@media (prefers-color-scheme: dark) {
  body.theme-slate {
    --bg: #020617;
    --surface: #020617;
    --text: #e5e7eb;
    --muted-text: #94a3b8;
    --border: #1e293b;

    --primary: #60a5fa;
    --primary-hover: #93c5fd;

    --focus: #fde047;
  }
}

/* ==================================================
   THEME: PLUM
================================================== */

body.theme-plum {
  --bg: #faf5ff;
  --surface: #ffffff;
  --text: #2e1065;
  --muted-text: #6b4ca6;
  --border: #e9d5ff;

  --primary: #7c3aed;
  --primary-hover: #6d28d9;

  --focus: #fde047;
}

@media (prefers-color-scheme: dark) {
  body.theme-plum {
    --bg: #1a1025;
    --surface: #241336;
    --text: #f3e8ff;
    --muted-text: #c4b5fd;
    --border: #3b1f5c;

    --primary: #a78bfa;
    --primary-hover: #c4b5fd;

    --focus: #fde047;
  }
}

/* ==================================================
   THEME: SAND
================================================== */

body.theme-sand {
  --bg: #fffaf0;
  --surface: #ffffff;
  --text: #3a2f1b;
  --muted-text: #7a6a4a;
  --border: #f0e0c0;

  --primary: #c97c2d;
  --primary-hover: #a9621f;

  --focus: #ffbf47;
}

@media (prefers-color-scheme: dark) {
  body.theme-sand {
    --bg: #2a2114;
    --surface: #352a1b;
    --text: #f5ecd8;
    --muted-text: #d6c6a1;
    --border: #4a3a22;

    --primary: #f1a85b;
    --primary-hover: #f6c177;

    --focus: #ffd166;
  }
}

/* ==================================================
   THEME: STEEL
================================================== */

body.theme-steel {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: #111827;
  --muted-text: #4b5563;
  --border: #d1d5db;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --focus: #fde047;
}

@media (prefers-color-scheme: dark) {
  body.theme-steel {
    --bg: #0b1120;
    --surface: #111827;
    --text: #e5e7eb;
    --muted-text: #9ca3af;
    --border: #1f2933;

    --primary: #60a5fa;
    --primary-hover: #93c5fd;

    --focus: #fde047;
  }
}