/**
 * m0tel-cord theme system — CSS custom property overrides per data-theme.
 * Each block targets html[data-theme="..."] to swap palette variables.
 * The default :root (midnight) is defined inline in index.php — only
 * non-default themes need explicit overrides here.
 *
 * Usage: <link rel="stylesheet" href="/css/themes.css">
 */

/* ─────────── Forest ─────────── */
html[data-theme="forest"] {
  --bg-primary: #1a1e1b;
  --bg-secondary: #2d302c;
  --bg-tertiary: #373d36;
  --accent: #3ba55d;
  --accent-hover: #2d8a4a;
  --border: #3a403b;
}

/* ─────────── Ocean ─────────── */
html[data-theme="ocean"] {
  --bg-primary: #1a1e2b;
  --bg-secondary: #2c303d;
  --bg-tertiary: #363b4d;
  --accent: #4d9de0;
  --accent-hover: #3a7bc8;
  --border: #3a3e4a;
}

/* ─────────── Sunset ─────────── */
html[data-theme="sunset"] {
  --bg-primary: #1e1a1b;
  --bg-secondary: #302c2d;
  --bg-tertiary: #3d3637;
  --accent: #e05d4d;
  --accent-hover: #c94d3d;
  --border: #403a3b;
}

/* ─────────── Mono ─────────── */
html[data-theme="mono"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3d3d3d;
  --accent: #8a8a8a;
  --accent-hover: #6a6a6a;
  --border: #4a4a4a;
}

/* ─────────── Cyber ─────────── */
html[data-theme="cyber"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --accent: #00ff41;
  --accent-hover: #00cc34;
  --border: #1a1a1a;
}

/* ─────────── Soft Light ─────────── */
html[data-theme="soft-light"] {
  --bg-primary: #f0f0f0;
  --bg-secondary: #e0e0e0;
  --bg-tertiary: #d0d0d0;
  --accent: #5865f2;
  --accent-hover: #4752c4;
  --border: #cccccc;
  --text-primary: #1a1a1a;
  --text-muted: #666666;
}

/* ─────────── Custom ─────────── */
/*
  html[data-theme="custom"] has no hardcoded overrides here because
  the JS module applies inline style.setProperty() for the user-chosen
  palette. This empty rule ensures the attribute is recognised and
  the theme picker highlights correctly.
*/