/* Dark theme for Kaddy's static pages. Each page keeps its own light tokens
   in its <style>; this repaints them with the app's dark values (computeTheme
   in src/lib/theme.js, default violet), not a dimmed copy of the light ones.
   It applies when the system is dark, unless the app's theme is set to Light,
   and whenever it's set to Dark (theme.js puts that on <html> as data-theme).
   The two blocks below carry the same values: keep them in step.
   Screen only, so a printed page stays dark ink on white paper. */

:root[data-theme="light"] { color-scheme: light; }

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #08070F;
    --ink: #FFFFFF;
    --ink-dim: rgba(255,255,255,0.62);
    --ink-faint: rgba(255,255,255,0.55);
    --dim: rgba(255,255,255,0.62);
    --card: rgba(45,44,51,0.92);
    --glass-bg: rgba(45,44,51,0.92);
    --glass-raised: rgba(57,56,63,0.93);
    --border: rgba(255,255,255,0.16);
    --glass-border: rgba(255,255,255,0.16);
    --input-bg: rgba(255,255,255,0.07);
    --accent-soft: rgba(117,83,255,0.35);
    --accent-border: rgba(117,83,255,0.55);
    --accent-text: #C2B3FF;
    --accent-on-tint: #C2B3FF;
    --teal-text: #4FDBD7;
    --teal-soft: rgba(45,212,207,0.16);
    --coral-text: #FF949E;
    --coral-soft: rgba(255,93,108,0.16);
    --shadow-card: 0 8px 32px rgba(0,0,0,0.35);
    --shadow-raised: 0 10px 26px rgba(0,0,0,0.42);
    --shadow-phone: 0 16px 40px rgba(0,0,0,0.48);
    --bezel: #2D2C35;
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #08070F;
    --ink: #FFFFFF;
    --ink-dim: rgba(255,255,255,0.62);
    --ink-faint: rgba(255,255,255,0.55);
    --dim: rgba(255,255,255,0.62);
    --card: rgba(45,44,51,0.92);
    --glass-bg: rgba(45,44,51,0.92);
    --glass-raised: rgba(57,56,63,0.93);
    --border: rgba(255,255,255,0.16);
    --glass-border: rgba(255,255,255,0.16);
    --input-bg: rgba(255,255,255,0.07);
    --accent-soft: rgba(117,83,255,0.35);
    --accent-border: rgba(117,83,255,0.55);
    --accent-text: #C2B3FF;
    --accent-on-tint: #C2B3FF;
    --teal-text: #4FDBD7;
    --teal-soft: rgba(45,212,207,0.16);
    --coral-text: #FF949E;
    --coral-soft: rgba(255,93,108,0.16);
    --shadow-card: 0 8px 32px rgba(0,0,0,0.35);
    --shadow-raised: 0 10px 26px rgba(0,0,0,0.42);
    --shadow-phone: 0 16px 40px rgba(0,0,0,0.48);
    --bezel: #2D2C35;
  }
}