/* HellasCY Studio: θέματα του panel (φωτεινό · σύστημα · σκοτεινό). Φορτώνει τελευταίο, μετά το panel.css και τα panel-<ενότητα>.css.
   - Το <html data-theme="light|system|dark"> το γράφει ο server από το cookie hcy_theme (view.php), οπότε δεν υπάρχει αναβόσβημα.
   - Το σκοτεινό είναι τα tokens του :root στο panel.css. Εδώ: (1) λίγα «παράγωγα» tokens για χρώματα που ήταν γραμμένα με το χέρι στο panel.css,
     με τις ίδιες τιμές στο σκοτεινό, (2) τα tokens του φωτεινού (δύο φορές: data-theme=light και data-theme=system σε φωτεινή συσκευή — κράτα τα ίδια),
     (3) οι κανόνες που διαβάζουν τα παράγωγα tokens (μία φορά), (4) «σκοτεινά νησιά»: ο καμβάς του editor και οι μικρογραφίες μένουν πάντα σκοτεινά.
   - Ενότητες: μόνο tokens του :root (--bg --s1 --s2 --s3 --field --line* --text --muted --dim --acc* --ok --warn --err --info --live --shadow), και δουλεύουν και στα δύο θέματα.
   - Όχι CSS nesting (το OBS έχει παλιό Chromium στα docks). */

/* (1) Παράγωγα tokens: σκοτεινό (ίδιες τιμές με πριν) */
:root {
  --hover: rgba(255,255,255,.02); --hover-row: rgba(255,255,255,.015); --th-bg: rgba(255,255,255,.012); --chart-hover: rgba(255,255,255,.025);
  --side-bg: #0e1014; --top-bg: rgba(11,12,15,.86); --nav-on: #fff; --strong: #fff;
  --al-err: #fecaca; --al-ok: #bbf7d0; --al-info: #cfe0fd; --al-warn: #fde68a; --toast-err: #fecaca;
  --scrim: rgba(0,0,0,.55); --member-body: rgba(0,0,0,.12); --ck-ink: #05261a; --swatch-on: #fff;
  --seg-track: var(--s1); --seg-on: var(--s3); --seg-shadow: inset 0 0 0 1px var(--line2), 0 1px 2px rgba(0,0,0,.3);
  --mseg-track: var(--field);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba2ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* (2) Φωτεινό. Αντιθέσεις (WCAG AA) σε λευκό / στο --bg: κείμενο 18 / 16.6, --muted 7.8 / 7.2, --dim 5 / 4.6, --acc 5.3 / 4.9, --ok 5.5 / 5, --warn 5.5 / 5, --err 5.4 / 5, --info 5.2 / 4.7. */
:root[data-theme="light"] {
  --bg: #f4f5f7; --s1: #ffffff; --s2: #f3f4f7; --s3: #e8ebf0; --field: #ffffff;
  --line: #e1e4ea; --line2: #d0d5dd; --line3: #aeb5c0;
  --text: #14161b; --muted: #4b5262; --dim: #677080;
  --acc: #b5490a; --acc2: #9c3f08; --ink: #1c0e00; --acc-soft: rgba(234,98,12,.09); --acc-line: rgba(181,73,10,.42);
  --ok: #047857; --warn: #a94f07; --err: #cf2020; --info: #2563eb; --live: #e11d48;
  --shadow: 0 12px 32px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  --hover: rgba(16,24,40,.03); --hover-row: rgba(16,24,40,.025); --th-bg: #f7f8fa; --chart-hover: rgba(16,24,40,.04);
  --side-bg: #ffffff; --top-bg: rgba(244,245,247,.88); --nav-on: var(--text); --strong: currentColor;
  --al-err: #991b1b; --al-ok: #065f46; --al-info: #1e40af; --al-warn: #92400e; --toast-err: #b91c1c;
  --scrim: rgba(16,24,40,.38); --member-body: #f7f8fa; --ck-ink: #fff; --swatch-on: var(--text);
  --seg-track: var(--s3); --seg-on: #fff; --seg-shadow: 0 1px 2px rgba(16,24,40,.12), 0 0 0 1px rgba(16,24,40,.04);
  --mseg-track: var(--s3);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg: #f4f5f7; --s1: #ffffff; --s2: #f3f4f7; --s3: #e8ebf0; --field: #ffffff;
    --line: #e1e4ea; --line2: #d0d5dd; --line3: #aeb5c0;
    --text: #14161b; --muted: #4b5262; --dim: #677080;
    --acc: #b5490a; --acc2: #9c3f08; --ink: #1c0e00; --acc-soft: rgba(234,98,12,.09); --acc-line: rgba(181,73,10,.42);
    --ok: #047857; --warn: #a94f07; --err: #cf2020; --info: #2563eb; --live: #e11d48;
    --shadow: 0 12px 32px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
    --hover: rgba(16,24,40,.03); --hover-row: rgba(16,24,40,.025); --th-bg: #f7f8fa; --chart-hover: rgba(16,24,40,.04);
    --side-bg: #ffffff; --top-bg: rgba(244,245,247,.88); --nav-on: var(--text); --strong: currentColor;
    --al-err: #991b1b; --al-ok: #065f46; --al-info: #1e40af; --al-warn: #92400e; --toast-err: #b91c1c;
    --scrim: rgba(16,24,40,.38); --member-body: #f7f8fa; --ck-ink: #fff; --swatch-on: var(--text);
    --seg-track: var(--s3); --seg-on: #fff; --seg-shadow: 0 1px 2px rgba(16,24,40,.12), 0 0 0 1px rgba(16,24,40,.04);
    --mseg-track: var(--s3);
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: light;
  }
}

/* (3) Κανόνες με τα παράγωγα tokens (στο σκοτεινό βγαίνουν ίδιοι με πριν) */
select.input { background-image: var(--chev); }
.side { background: var(--side-bg); }
.top { background: var(--top-bg); }
.nav-item.on { color: var(--nav-on); }
.alert.err { color: var(--al-err); }
.alert.ok { color: var(--al-ok); }
.alert.info { color: var(--al-info); }
.alert.warn { color: var(--al-warn); }
.alert b { color: var(--strong); }
.toast.err { color: var(--toast-err); }
.tbl th, .dh-hist-head { background: var(--th-bg); }
.tbl tbody tr:hover td { background: var(--hover-row); }
a.list-row:hover, .dh-quick .list-row:hover, .dh-st:hover { background: var(--hover); }
.dh-hits rect:hover { fill: var(--chart-hover); }
.member-body { background: var(--member-body); }
.checklist li.done .ck { color: var(--ck-ink); }
.swatch.on { border-color: var(--swatch-on); }
.dh-seg { background: var(--seg-track); }
.dh-seg button[aria-checked=true] { background: var(--seg-on); box-shadow: var(--seg-shadow); }
.menu-seg { background: var(--mseg-track); }
.menu-pop .menu-seg button.on { background: var(--seg-on); box-shadow: var(--seg-shadow); }
@media (max-width: 960px) {
  .scrim, .as-scrim { background: var(--scrim); }
}

/* Φωτεινό: λεπτομέρειες που δεν είναι απλά χρώματα */
:root[data-theme="light"] .card, :root[data-theme="light"] .ov, :root[data-theme="light"] .member, :root[data-theme="light"] .dh-tile { box-shadow: 0 1px 2px rgba(16,24,40,.04); }
:root[data-theme="light"] .badge.live, :root[data-theme="light"] .pill.onair { color: #fff; }
:root[data-theme="light"] .ctx-bar { background: linear-gradient(90deg, rgba(234,98,12,.12), rgba(234,98,12,.04) 70%), var(--bg); }
:root[data-theme="light"] .chip.on .n { color: var(--acc2); }
:root[data-theme="light"] dialog.dlg::backdrop, :root[data-theme="light"] dialog.pal::backdrop { background: rgba(16,24,40,.38); }
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .card, :root[data-theme="system"] .ov, :root[data-theme="system"] .member, :root[data-theme="system"] .dh-tile { box-shadow: 0 1px 2px rgba(16,24,40,.04); }
  :root[data-theme="system"] .ctx-bar { background: linear-gradient(90deg, rgba(234,98,12,.12), rgba(234,98,12,.04) 70%), var(--bg); }
  :root[data-theme="system"] .chip.on .n { color: var(--acc2); }
  :root[data-theme="system"] dialog.dlg::backdrop, :root[data-theme="system"] dialog.pal::backdrop { background: rgba(16,24,40,.38); }
}

/* (4) Σκοτεινά νησιά: ο καμβάς του editor, οι μικρογραφίες των overlays και οι προεπισκοπήσεις μένουν σκοτεινά σε κάθε θέμα
   (το overlay βγαίνει πάνω από το παιχνίδι, όχι πάνω σε λευκό). Τα ίδια tokens με το :root του panel.css, μαζί με τα χρώματα των .alert
   (μια ειδοποίηση μέσα στο νησί διαβάζεται και στο φωτεινό θέμα). Η μπάρα του editor (.ed-bar, .ai-bar) ακολουθεί το θέμα. */
.canvas-wrap, .thumb, .pv-dark {
  --bg: #0b0c0f; --s1: #111318; --s2: #171a20; --s3: #1e222a; --field: #0d0f13;
  --line: #22262e; --line2: #2e333d; --line3: #3b414d;
  --text: #e8eaee; --muted: #9ba2ae; --dim: #838b99;
  --al-err: #fecaca; --al-ok: #bbf7d0; --al-info: #cfe0fd; --al-warn: #fde68a; --strong: #fff;
  --acc: #ff8a1f; --acc2: #ff5a1f; --ink: #1c0e00; --acc-soft: rgba(255,138,31,.11); --acc-line: rgba(255,138,31,.45);
  --ok: #34d399; --warn: #fbbf24; --err: #f87171; --info: #60a5fa; --live: #f0475a;
  --shadow: 0 16px 48px rgba(0,0,0,.45);
  color-scheme: dark;
  color: var(--text);
}