/* ============================================================
   themes.css — 12 swappable color themes (single source of truth)
   ============================================================

   HOW IT WORKS
   - Each theme sets ONLY 10 semantic RGB triplets (`--*-rgb`) plus optional
     shape overrides (radius/shadow/blur). Triplets keep the "space-separated,
     no rgb()" form so opacity works: rgb(var(--accent-rgb) / .14).
   - The shared `[data-theme]` bridge below turns those triplets into the exact
     color variables the existing app already consumes (--surface, --text,
     --brand, …). Nothing in style.css or the components changes.

   ADD A THEME:  add one `[data-theme='id'] { …10 triplets… }` block here
                 + one entry in js/themes.js. That's it.

   Naming note: the triplets are `--bg-rgb` etc. (not `--bg`) because the app
   already uses `--bg`/`--surface`/`--ok`/`--warn`/`--danger` as literal colors.
   If this app ever moves to Tailwind, point the config at the `-rgb` names.
   ============================================================ */

/* ---- Bridge: triplets -> the color variables the app consumes ---- */
[data-theme] {
  --bg:           rgb(var(--bg-rgb));
  --surface:      rgb(var(--surface-rgb));
  --surface-2:    rgb(var(--ink-rgb) / .045);   /* subtle secondary surface */
  --text:         rgb(var(--ink-rgb));
  --text-muted:   rgb(var(--muted-rgb));
  --border:       rgb(var(--line-rgb));
  --brand:        rgb(var(--accent-rgb));
  --brand-strong: rgb(var(--accent-rgb));
  --brand-soft:   rgb(var(--accent-rgb) / .14);
  --accent-ink:   rgb(var(--accent-ink-rgb));
  --ok:           rgb(var(--ok-rgb));
  --warn:         rgb(var(--warn-rgb));
  --danger:       rgb(var(--danger-rgb));

  --radius: 18px;
  --shadow: 0 4px 18px rgb(0 0 0 / .08);
  --blur: none;

  /* Keep Tabler's primary in sync with the theme accent */
  --tblr-primary: var(--brand);
}

/* Button text must ride on the accent, never assume white (dark/minimal/carbon
   have near-white accents where white text would vanish). Non-breaking: for the
   default purple, accent-ink is white == today's look. */
[data-theme] .btn-primary,
[data-theme] .btn-add {
  background: var(--brand); border-color: var(--brand); color: var(--accent-ink);
}

/* ============================ LIGHT ============================ */
/* light semantic status colors (darker, for contrast on light surfaces) */
[data-theme='minimal'], [data-theme='arena'], [data-theme='oceano'],
[data-theme='esmeralda'], [data-theme='coral'], [data-theme='glass'],
[data-theme='clay'], [data-theme='brutal'] {
  --ok-rgb: 21 128 61;  --warn-rgb: 180 83 9;  --danger-rgb: 185 28 28;
  --accent-ink-rgb: 255 255 255;
}

[data-theme='minimal'] {
  --bg-rgb: 250 250 250; --surface-rgb: 255 255 255;
  --ink-rgb: 23 23 23; --muted-rgb: 115 115 115; --line-rgb: 229 229 229;
  --accent-rgb: 23 23 23;
}
[data-theme='arena'] {
  --bg-rgb: 250 246 237; --surface-rgb: 255 253 248;
  --ink-rgb: 60 47 33; --muted-rgb: 128 110 90; --line-rgb: 234 224 208;
  --accent-rgb: 146 91 30;
}
[data-theme='oceano'] {
  --bg-rgb: 240 247 252; --surface-rgb: 255 255 255;
  --ink-rgb: 12 42 66; --muted-rgb: 82 111 136; --line-rgb: 214 230 241;
  --accent-rgb: 2 108 172;
}
[data-theme='esmeralda'] {
  --bg-rgb: 240 250 245; --surface-rgb: 255 255 255;
  --ink-rgb: 16 51 38; --muted-rgb: 76 116 98; --line-rgb: 213 236 224;
  --accent-rgb: 4 120 87;
}
[data-theme='coral'] {
  --bg-rgb: 253 244 244; --surface-rgb: 255 255 255;
  --ink-rgb: 65 26 32; --muted-rgb: 134 90 96; --line-rgb: 245 219 220;
  --accent-rgb: 190 41 71;
}
[data-theme='glass'] {
  --bg-rgb: 226 232 240; --surface-rgb: 255 255 255;
  --ink-rgb: 15 23 42; --muted-rgb: 71 85 105; --line-rgb: 255 255 255;
  --accent-rgb: 37 99 235;
  --radius: 18px;
  --shadow: 0 8px 30px rgb(15 23 42 / .12);
  --blur: blur(14px) saturate(160%);
}
[data-theme='clay'] {
  --bg-rgb: 237 233 254; --surface-rgb: 245 243 255;
  --ink-rgb: 49 46 129; --muted-rgb: 109 105 168; --line-rgb: 233 228 253;
  --accent-rgb: 79 70 229;
  --radius: 22px;
  /* neumorphic: dark outer + light outer + soft inset */
  --shadow: 6px 6px 16px rgb(174 170 214 / .55),
            -6px -6px 16px rgb(255 255 255 / .9),
            inset 1px 1px 2px rgb(255 255 255 / .6);
}
[data-theme='brutal'] {
  --bg-rgb: 245 245 235; --surface-rgb: 255 255 255;
  --ink-rgb: 17 17 17; --muted-rgb: 82 82 82; --line-rgb: 17 17 17; /* black borders */
  --accent-rgb: 250 204 21; --accent-ink-rgb: 17 17 17; /* yellow + black text */
  --radius: 0px;
  --shadow: 4px 4px 0 rgb(17 17 17); /* hard offset, classic brutalist */
}

/* ============================ DARK ============================= */
/* dark semantic status colors (brighter, for contrast on dark surfaces) */
[data-theme='dark'], [data-theme='medianoche'], [data-theme='bosque'],
[data-theme='vino'], [data-theme='carbon'] {
  --ok-rgb: 74 222 128;  --warn-rgb: 251 191 36;  --danger-rgb: 248 113 113;
  --shadow: 0 4px 18px rgb(0 0 0 / .35);
}

[data-theme='dark'] {
  --bg-rgb: 10 10 10; --surface-rgb: 24 24 27;
  --ink-rgb: 244 244 245; --muted-rgb: 161 161 170; --line-rgb: 39 39 42;
  --accent-rgb: 244 244 245; --accent-ink-rgb: 24 24 27;
}
[data-theme='medianoche'] {
  --bg-rgb: 8 14 28; --surface-rgb: 17 25 44;
  --ink-rgb: 226 234 248; --muted-rgb: 143 158 184; --line-rgb: 33 44 68;
  --accent-rgb: 96 165 250; --accent-ink-rgb: 8 14 28;
}
[data-theme='bosque'] {
  --bg-rgb: 8 20 15; --surface-rgb: 15 32 24;
  --ink-rgb: 222 238 229; --muted-rgb: 134 165 148; --line-rgb: 30 52 41;
  --accent-rgb: 52 211 153; --accent-ink-rgb: 8 20 15;
}
[data-theme='vino'] {
  --bg-rgb: 24 10 15; --surface-rgb: 38 17 24;
  --ink-rgb: 245 227 231; --muted-rgb: 176 138 148; --line-rgb: 60 30 39;
  --accent-rgb: 244 114 148; --accent-ink-rgb: 24 10 15;
}
[data-theme='carbon'] {
  --bg-rgb: 0 0 0; --surface-rgb: 12 12 12;
  --ink-rgb: 240 240 240; --muted-rgb: 150 150 150; --line-rgb: 32 32 32;
  --accent-rgb: 255 255 255; --accent-ink-rgb: 0 0 0;
  --shadow: none;   /* pure black: nothing to lift on OLED */
}

/* ---- Glass: translucent cards + soft page gradients ---- */
[data-theme='glass'] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgb(99 102 241 / .18), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgb(14 165 233 / .18), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme='glass'] .soft-card,
[data-theme='glass'] .dog-card,
[data-theme='glass'] .emp-card,
[data-theme='glass'] .modal-shell {
  background: rgb(var(--surface-rgb) / .7);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-color: rgb(255 255 255 / .6);
}

/* ---- Clay: give the app cards the neumorphic lift ---- */
[data-theme='clay'] .soft-card,
[data-theme='clay'] .dog-card,
[data-theme='clay'] .emp-card {
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* ---- Brutal: thick black borders, hard offset shadow, square corners ---- */
[data-theme='brutal'] .soft-card,
[data-theme='brutal'] .dog-card,
[data-theme='brutal'] .emp-card,
[data-theme='brutal'] .modal-shell {
  border-width: 2px; border-color: var(--border);
  box-shadow: var(--shadow);
}
[data-theme='brutal'] .btn { border-width: 2px; }

/* ============================================================
   Theme selector (card button + bottom sheet)
   ============================================================ */
.theme-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 8px 12px; cursor: pointer; font: inherit;
}
.theme-btn__dots { display: flex; }
.theme-btn__dots span { width: 12px; height: 12px; border-radius: 50%; margin-left: -4px; border: 1.5px solid var(--surface); }
.theme-btn__dots span:first-child { margin-left: 0; }
.theme-btn__name { font-size: 13px; font-weight: 600; }
.theme-btn__ico { margin-left: auto; color: var(--text-muted); font-size: 18px; }

.theme-sheet { position: fixed; inset: 0; z-index: 90; display: none; }
.theme-sheet.is-open { display: block; }
.theme-sheet__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.theme-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); color: var(--text);
  border-radius: 20px 20px 0 0; border-top: 1px solid var(--border);
  max-height: 82vh; overflow-y: auto;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  animation: themeSheetUp .22s ease;
}
@keyframes themeSheetUp { from { transform: translateY(30px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.theme-sheet__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 14px 4px 8px; }
.theme-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; color: var(--text); font: inherit;
  padding: 10px 8px; border-radius: 12px; cursor: pointer; text-align: left;
}
.theme-opt:active { background: var(--surface-2); }
.theme-opt__dots { display: flex; }
.theme-opt__dots span { width: 16px; height: 16px; border-radius: 50%; margin-left: -5px; border: 2px solid var(--surface); }
.theme-opt__dots span:first-child { margin-left: 0; }
.theme-opt__name { font-size: 15px; font-weight: 600; }
.theme-opt__check { margin-left: auto; color: var(--brand); font-size: 20px; opacity: 0; }
.theme-opt.is-active .theme-opt__check { opacity: 1; }

/* Respect reduced motion: kill theme animations/transitions for those who asked. */
@media (prefers-reduced-motion: reduce) {
  .theme-sheet__panel { animation: none; }
  * { transition: none !important; }
}