/* ───────────────────────────────────────────────────────────────────────
   proForma — light/dark theming layer.

   The DARK palette is the product default and is NOT changed here: the
   :root block below only re-declares the same values kynship_ui already
   ships, plus a handful of new semantic tokens (accent text, washes,
   shadows, chart colors) that used to be hardcoded in templates.

   html[data-theme="light"] supplies the light counterpart. Everything a
   template renders should resolve through these tokens so a single
   attribute flip re-themes the whole page.

   Token contract
     --bg/--panel/--panel-2/--panel-3  surface ramp (page → raised)
     --line / --line-strong            borders, hover borders
     --fg / --fg-dim / --fg-faint      text ramp (all ≥ 4.5:1 on --bg)
     --grn/--cyn/--amber/--rose/--violet  accents, readable as TEXT
     --*-rgb                           same accent as an "R G B" triplet
                                       for rgb(var(--x)/.12) tints
     --on-accent                       text on a filled accent surface
     --wash-rgb                        neutral overlay wash triplet
     --chart-grid / --chart-axis       Chart.js gridlines
   ─────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg:        #0f1115;
  --panel:     #1a1d24;
  --panel-2:   #22262f;
  --panel-3:   #2a2f3a;
  --line:      #2d3139;
  --line-strong: #3a4150;
  --fg:        #f3f4f6;
  --fg-dim:    #9aa1ac;
  --fg-faint:  #5f6672;
  --grn:       #34d399;
  --grn-deep:  #10b981;
  --cyn:       #22d3ee;
  --amber:     #fbbf24;
  --rose:      #fb7185;
  --violet:    #a78bfa;

  --grn-rgb:   52 211 153;
  --cyn-rgb:   34 211 238;
  --amber-rgb: 251 191 36;
  --rose-rgb:  251 113 133;
  --wash-rgb:  255 255 255;

  --on-accent: #07120d;

  --overlay:   rgba(15, 17, 21, .72);
  --glass-bg:  rgba(15, 17, 21, .82);
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, .25);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .02), 0 2px 12px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);

  --chart-grid: rgba(255, 255, 255, .05);
  --chart-axis: rgba(255, 255, 255, .06);

  /* Tailwind token triplets (see the config override in _theme_head.html). */
  --t-bg: 15 17 21;
  --t-panel: 26 29 36;
  --t-panel2: 34 38 47;
  --t-panel3: 42 47 58;
  --t-line: 45 49 57;
  --t-fg: 243 244 246;
  --t-fg-dim: 154 161 172;
  --t-fg-faint: 95 102 114;
  --t-grn: 52 211 153;
  --t-grn600: 16 185 129;
  --t-cyn: 34 211 238;
  --t-cyn600: 6 182 212;
}

/* ── Light theme ─────────────────────────────────────────────────────────
   Surfaces step *up* in brightness the way dark steps up in lightness:
   the page is a soft slate-tinted gray so white cards read as raised
   (no white card on a white page). Accents are darkened until they pass
   4.5:1 as text on white. ─────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;

  --bg:        #f4f6f8;
  --panel:     #ffffff;
  --panel-2:   #eceff3;
  --panel-3:   #dfe4ea;
  --line:      #d6dbe3;
  --line-strong: #b9c1cd;
  --fg:        #10141a;
  --fg-dim:    #4d5663;
  --fg-faint:  #6d7684;
  --grn:       #0b7a55;
  --grn-deep:  #056140;
  --cyn:       #0b6e86;
  --amber:     #9a5b06;
  --rose:      #b42c47;
  --violet:    #5b46c9;

  --grn-rgb:   11 122 85;
  --cyn-rgb:   11 110 134;
  --amber-rgb: 154 91 6;
  --rose-rgb:  180 44 71;
  --wash-rgb:  16 20 26;

  --on-accent: #ffffff;

  --overlay:   rgba(244, 246, 248, .74);
  --glass-bg:  rgba(244, 246, 248, .86);
  --shadow-xs: 0 1px 0 rgba(16, 20, 26, .08);
  --shadow-sm: 0 1px 2px rgba(16, 20, 26, .06), 0 2px 10px rgba(16, 20, 26, .07);
  --shadow-md: 0 8px 24px rgba(16, 20, 26, .14);
  --shadow-lg: 0 24px 60px rgba(16, 20, 26, .18);
  --shadow-lift: 0 1px 2px rgba(16, 20, 26, .08), 0 8px 22px rgba(16, 20, 26, .12);

  --chart-grid: rgba(16, 20, 26, .09);
  --chart-axis: rgba(16, 20, 26, .14);

  --t-bg: 244 246 248;
  --t-panel: 255 255 255;
  --t-panel2: 236 239 243;
  --t-panel3: 223 228 234;
  --t-line: 214 219 227;
  --t-fg: 16 20 26;
  --t-fg-dim: 77 86 99;
  --t-fg-faint: 109 118 132;
  --t-grn: 11 122 85;
  --t-grn600: 5 97 64;
  --t-cyn: 11 110 134;
  --t-cyn600: 8 90 110;
}

/* ── Light-mode fixes for values hardcoded inside kynship-ui.css ───────── */
html[data-theme="light"] ::selection { background: rgba(11, 122, 85, .18); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aab3c0; }

html[data-theme="light"] .panel { box-shadow: var(--shadow-sm); }
html[data-theme="light"] .lift:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}
html[data-theme="light"] .glass { background: var(--glass-bg); }
html[data-theme="light"] .loading-overlay { background: var(--overlay); }

html[data-theme="light"] .btn:hover { border-color: var(--line-strong); }
html[data-theme="light"] .btn-accent {
  color: var(--on-accent);
  box-shadow: 0 1px 3px rgba(5, 97, 64, .3);
}
html[data-theme="light"] .btn-accent:hover { background: var(--grn-deep); }

html[data-theme="light"] .spinner { border-color: rgba(16, 20, 26, .14); }
html[data-theme="light"] table.tbl tbody tr:hover { background: rgba(16, 20, 26, .035); }
html[data-theme="light"] .tip-portal { box-shadow: var(--shadow-lg); }
html[data-theme="light"] .chip-amber {
  color: var(--amber); border-color: rgb(var(--amber-rgb) / .4);
  background: rgb(var(--amber-rgb) / .1);
}
html[data-theme="light"] .chip-rose {
  color: var(--rose); border-color: rgb(var(--rose-rgb) / .4);
  background: rgb(var(--rose-rgb) / .1);
}
html[data-theme="light"] .step.done .step-n { color: #fff; }
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}
/* Raw Tailwind palette utilities used in a few templates: the 400-level
   tints are unreadable on a light surface, so deepen them. */
html[data-theme="light"] .text-rose-400 { color: #b42c47; }
html[data-theme="light"] .text-red-400  { color: #b91c1c; }
html[data-theme="light"] .text-yellow-500 { color: #8a5a00; }
html[data-theme="light"] .border-red-400\/30 { border-color: rgba(185, 28, 28, .35); }
html[data-theme="light"] .bg-red-400\/10 { background-color: rgba(185, 28, 28, .08); }
html[data-theme="light"] .bg-yellow-500\/10 { background-color: rgba(138, 90, 0, .1); }

/* ── Theme toggle button ─────────────────────────────────────────────────
   Sun shows in dark mode (click → go light), moon in light mode. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--fg-dim);
  cursor: pointer; padding: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.theme-toggle:hover { color: var(--grn); border-color: var(--grn); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media print { .theme-toggle { display: none !important; } }