/* ============================================================
   DDN Theme System — CSS Custom Properties (RGB triplets)

   Tailwind usage:  "rgb(var(--surface) / <alpha-value>)"
   Inline/CSS usage: rgb(var(--surface))
   With alpha:       rgb(var(--surface) / 0.5)
   ============================================================ */

/* ---------- Dark Theme (default) ---------- */
:root {
  --surface: 19 19 19;
  --surface-container-lowest: 14 14 14;
  --surface-container-low: 28 27 27;
  --surface-container: 32 31 31;
  --surface-container-high: 42 42 42;
  --surface-container-highest: 53 53 52;
  --surface-bright: 57 57 57;
  --surface-dim: 19 19 19;
  --surface-variant: 53 53 52;
  --on-surface: 229 226 225;
  --on-surface-variant: 199 196 215;
  --on-background: 229 226 225;
  --background: 19 19 19;
  --primary: 192 193 255;
  --primary-container: 128 131 255;
  --primary-fixed: 225 224 255;
  --primary-fixed-dim: 192 193 255;
  --on-primary: 16 0 169;
  --on-primary-container: 13 0 150;
  --on-primary-fixed: 7 0 108;
  --on-primary-fixed-variant: 47 46 190;
  --secondary: 192 193 255;
  --secondary-container: 66 68 123;
  --secondary-fixed: 225 224 255;
  --secondary-fixed-dim: 192 193 255;
  --on-secondary: 41 42 96;
  --on-secondary-container: 178 179 242;
  --on-secondary-fixed: 19 20 74;
  --on-secondary-fixed-variant: 64 65 120;
  --tertiary: 255 183 131;
  --tertiary-container: 217 119 33;
  --tertiary-fixed: 255 220 197;
  --tertiary-fixed-dim: 255 183 131;
  --on-tertiary: 79 37 0;
  --on-tertiary-container: 69 32 0;
  --on-tertiary-fixed: 48 20 0;
  --on-tertiary-fixed-variant: 112 55 0;
  --error: 255 180 171;
  --error-container: 147 0 10;
  --on-error: 105 0 5;
  --on-error-container: 255 218 214;
  --outline: 144 143 160;
  --outline-variant: 70 69 84;
  --surface-tint: 192 193 255;
  --inverse-surface: 229 226 225;
  --inverse-on-surface: 49 48 48;
  --inverse-primary: 73 75 214;

  /* Landing page vars */
  --lp-bg: #0a0a0f;
  --lp-bg2: #111118;
  --lp-bg3: #16161f;
  --lp-bg4: #1c1c28;
  --lp-fg: #e8e6f0;
  --lp-fg2: #a09cb8;
  --lp-fg3: #6b6880;
  --lp-accent: #b4b5ff;
  --lp-accent2: #8083ff;
  --lp-accent-dark: #2a2c6e;
  --lp-amber: #ffb783;
  --lp-amber-dark: #3d2200;
  --lp-green: #6ee7a0;
  --lp-red: #ff8a8a;

  /* Admin dashboard vars */
  --adm-bg: #0a0a0a;
  --adm-s1: #111111;
  --adm-s2: #171717;
  --adm-s3: #1e1e1e;
  --adm-s4: #262626;
  --adm-s5: #303030;
  --adm-s6: #3a3a3a;
  --adm-tx: #ebe9e4;
  --adm-tx2: #a09d96;
  --adm-tx3: #6e6b65;
  --adm-pr: #c0c1ff;
  --adm-pr2: #8083ff;
  --adm-pr3: #6366f1;
  --adm-acc: #ffb783;
  --adm-acc2: #f59e0b;
  --adm-ok: #4ade80;
  --adm-ok-dim: #166534;
  --adm-warn: #facc15;
  --adm-warn-dim: #854d0e;
  --adm-err: #f87171;
  --adm-err-dim: #991b1b;
}

/* ---------- Light Theme ---------- */
[data-theme="light"] {
  --surface: 254 251 255;
  --surface-container-lowest: 255 255 255;
  --surface-container-low: 247 244 241;
  --surface-container: 241 238 234;
  --surface-container-high: 235 232 228;
  --surface-container-highest: 230 227 222;
  --surface-bright: 254 251 255;
  --surface-dim: 222 219 215;
  --surface-variant: 231 224 236;
  --on-surface: 28 27 31;
  --on-surface-variant: 73 69 79;
  --on-background: 28 27 31;
  --background: 254 251 255;
  --primary: 73 75 214;
  --primary-container: 225 224 255;
  --primary-fixed: 225 224 255;
  --primary-fixed-dim: 192 193 255;
  --on-primary: 255 255 255;
  --on-primary-container: 13 0 150;
  --on-primary-fixed: 7 0 108;
  --on-primary-fixed-variant: 47 46 190;
  --secondary: 91 93 146;
  --secondary-container: 225 224 255;
  --secondary-fixed: 225 224 255;
  --secondary-fixed-dim: 192 193 255;
  --on-secondary: 255 255 255;
  --on-secondary-container: 19 20 74;
  --on-secondary-fixed: 19 20 74;
  --on-secondary-fixed-variant: 64 65 120;
  --tertiary: 138 81 0;
  --tertiary-container: 255 220 197;
  --tertiary-fixed: 255 220 197;
  --tertiary-fixed-dim: 255 183 131;
  --on-tertiary: 255 255 255;
  --on-tertiary-container: 48 20 0;
  --on-tertiary-fixed: 48 20 0;
  --on-tertiary-fixed-variant: 112 55 0;
  --error: 186 26 26;
  --error-container: 255 218 214;
  --on-error: 255 255 255;
  --on-error-container: 65 0 2;
  --outline: 121 117 127;
  --outline-variant: 202 196 208;
  --surface-tint: 73 75 214;
  --inverse-surface: 49 48 48;
  --inverse-on-surface: 244 240 239;
  --inverse-primary: 192 193 255;

  /* Landing page light */
  --lp-bg: #faf9f6;
  --lp-bg2: #f4f3f0;
  --lp-bg3: #eeedea;
  --lp-bg4: #e8e7e3;
  --lp-fg: #1c1b1f;
  --lp-fg2: #49454f;
  --lp-fg3: #79757f;
  --lp-accent: #494bd6;
  --lp-accent2: #5b5df0;
  --lp-accent-dark: #e1e0ff;
  --lp-amber: #8a5100;
  --lp-amber-dark: #ffdcc5;
  --lp-green: #146b31;
  --lp-red: #ba1a1a;

  /* Admin dashboard light */
  --adm-bg: #faf9f6;
  --adm-s1: #f4f3f0;
  --adm-s2: #eeedea;
  --adm-s3: #e8e7e3;
  --adm-s4: #e0dfdb;
  --adm-s5: #d6d5d1;
  --adm-s6: #cccbc7;
  --adm-tx: #1c1b1f;
  --adm-tx2: #49454f;
  --adm-tx3: #79757f;
  --adm-pr: #494bd6;
  --adm-pr2: #5b5df0;
  --adm-pr3: #4345c8;
  --adm-acc: #8a5100;
  --adm-acc2: #7c4800;
  --adm-ok: #146b31;
  --adm-ok-dim: #dcf5e3;
  --adm-warn: #795900;
  --adm-warn-dim: #fff3cc;
  --adm-err: #ba1a1a;
  --adm-err-dim: #ffdad6;
}

/* ---------- Theme toggle button ---------- */
#ddn-theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgb(var(--outline-variant) / 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--surface-container-high));
  color: rgb(var(--on-surface-variant));
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
#ddn-theme-toggle:hover {
  background: rgb(var(--surface-container-highest));
  transform: scale(1.08);
}
#ddn-theme-toggle:active { transform: scale(0.95); }
#ddn-theme-toggle .material-symbols-outlined { font-size: 20px; }

/* Pages with bottom nav + feedback button: raise toggle above both */
body.has-bottom-nav #ddn-theme-toggle { bottom: 136px; }