/* themes.css — selectable color themes (Dark is the :root default in variables.css) */

/* ─── LIGHT (warm paper / cream) ─── */
[data-theme="light"] {
  --bg: #f3f1ea;
  --bg2: #fbfaf6;
  --bg3: #e9e6db;
  --gold: #c0603a;
  --gold2: #a9522f;
  --amber: #b8442a;
  --text: #2b2a27;
  --text-dim: #57554e;
  --text-muted: #86837a;
  --border: rgba(0,0,0,0.12);
  --border-bright: rgba(0,0,0,0.22);
  --glow: rgba(192,96,58,0.10);
  /* hero keeps a dark scrim + white text even in light theme (see variables.css) */
}

/* Light-mode component fixes (higher specificity than component defaults) */
[data-theme="light"] .home-hero.sky-dawn    { background: linear-gradient(175deg, #ffdcc4 0%, var(--bg2) 62%); }
[data-theme="light"] .home-hero.sky-morning { background: linear-gradient(175deg, #ffe9c6 0%, var(--bg2) 62%); }
[data-theme="light"] .home-hero.sky-day     { background: linear-gradient(175deg, #cfe6ff 0%, var(--bg2) 62%); }
[data-theme="light"] .home-hero.sky-dusk    { background: linear-gradient(175deg, #ffd4d9 0%, var(--bg2) 62%); }
[data-theme="light"] .home-hero.sky-night   { background: linear-gradient(175deg, #dfe3f2 0%, var(--bg2) 62%); }
[data-theme="light"] .hero-star { background: #9aa6c8; }
[data-theme="light"] input[type="time"] { color-scheme: light; }
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }

/* ─── GRAY (neutral graphite) ─── */
[data-theme="gray"] {
  --bg: #202023;
  --bg2: #2a2a2e;
  --bg3: #35353a;
  --gold: #d97757;
  --gold2: #e79b80;
  --amber: #cb4d2e;
  --text: #ececee;
  --text-dim: #b8b8bd;
  --text-muted: #85858c;
  --border: rgba(255,255,255,0.10);
  --border-bright: rgba(255,255,255,0.20);
  --glow: rgba(217,119,87,0.10);
}

/* ─── MIDNIGHT (navy + azure) ─── */
[data-theme="midnight"] {
  --bg: #0d1420;
  --bg2: #141d2e;
  --bg3: #1f2a3f;
  --gold: #5aa0e0;
  --gold2: #86c0f5;
  --amber: #e0663c;
  --text: #eaf1fb;
  --text-dim: #aebfd6;
  --text-muted: #7385a0;
  --border: rgba(140,170,220,0.16);
  --border-bright: rgba(140,170,220,0.30);
  --glow: rgba(90,160,224,0.12);
}

/* ─── FOREST (deep green + sage) ─── */
[data-theme="forest"] {
  --bg: #121a15;
  --bg2: #18231c;
  --bg3: #223026;
  --gold: #79b47a;
  --gold2: #a6d6a2;
  --amber: #d9713a;
  --text: #eef3ec;
  --text-dim: #b6c6b4;
  --text-muted: #7f9080;
  --border: rgba(150,190,150,0.15);
  --border-bright: rgba(150,190,150,0.28);
  --glow: rgba(121,180,122,0.12);
}

/* ─── ROSE (plum + rose) ─── */
[data-theme="rose"] {
  --bg: #1e1620;
  --bg2: #281d2b;
  --bg3: #342639;
  --gold: #d986b0;
  --gold2: #f0a9cd;
  --amber: #e0663c;
  --text: #f6ecf2;
  --text-dim: #cdbcc7;
  --text-muted: #998a95;
  --border: rgba(220,160,190,0.16);
  --border-bright: rgba(220,160,190,0.28);
  --glow: rgba(217,134,176,0.12);
}

/* ─── THEME PICKER (settings) ─── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font-ui);
}

.theme-swatch:hover { border-color: var(--border-bright); }
.theme-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.theme-swatch-preview {
  height: 36px;
  border-radius: 4px;
  background: var(--sw-bg);
  border: 1px solid rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
}

.theme-swatch-preview::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px;
  width: 46%; height: 5px;
  border-radius: 3px;
  background: var(--sw-text, rgba(255,255,255,0.35));
}

.theme-swatch-preview::after {
  content: '';
  position: absolute;
  right: 7px; bottom: 7px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--sw-accent);
  box-shadow: 0 0 6px var(--sw-accent);
}

.theme-swatch-name {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: center;
}

.theme-swatch.active .theme-swatch-name { color: var(--gold); }