:root {
  color-scheme: light dark;
  --glass-bg: rgb(248 251 253 / 0.72);
  --glass-bd: rgb(206 217 229 / 0.45);
  --shadow-sm: 0 2px 8px rgb(36 61 108 / 0.09);
  --shadow-md: 0 22px 50px rgb(18 51 109 / 0.12);

  --ink: rgb(34 51 71);
  --muted: rgb(118 139 157);
  --canvas: rgb(252 251 254);
  --panel: rgb(248 247 251);
  --elev: rgb(255 254 251);
  --border: rgb(209 217 223);
  --accent: rgb(68 134 239);
  --accent-strong: rgb(38 114 239);
}

html[data-theme="dark"], [data-theme="dark"] body {
  color-scheme: dark;
  --glass-bg: rgb(19 34 61 / 0.65);
  --glass-bd: rgb(255 253 239 / 0.08);
  --shadow-sm: none;
  --shadow-md: none;
  --ink: rgb(241 246 247);
  --muted: rgb(176 179 207);
  --canvas: rgb(15 34 74);
  --panel: rgb(15 43 104);
  --elev: rgb(18 40 104);
  --border: rgb(42 71 148);
  --accent: rgb(124 209 229);
  --accent-strong: rgb(174 239 237);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    color-scheme: dark;
    --glass-bg: rgb(19 34 61 / 0.65);
    --glass-bd: rgb(255 253 239 / 0.08);
    --shadow-sm: none;
    --shadow-md: none;
    --ink: rgb(241 246 247);
    --muted: rgb(176 179 207);
    --canvas: rgb(15 34 74);
    --panel: rgb(15 43 104);
    --elev: rgb(18 40 104);
    --border: rgb(42 71 148);
    --accent: rgb(124 209 229);
    --accent-strong: rgb(174 239 237);
  }
}

html[data-theme="system"] body {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] body {
    color-scheme: light;
    --glass-bg: rgb(248 251 253 / 0.72);
    --glass-bd: rgb(206 217 229 / 0.45);
    --shadow-sm: 0 2px 8px rgb(36 61 108 / 0.09);
    --shadow-md: 0 22px 50px rgb(18 51 109 / 0.12);
    --ink: rgb(34 51 71);
    --muted: rgb(118 139 157);
    --canvas: rgb(252 251 254);
    --panel: rgb(248 247 251);
    --elev: rgb(255 254 251);
    --border: rgb(209 217 223);
    --accent: rgb(68 134 239);
    --accent-strong: rgb(38 114 239);
  }
}