/* mize UI theme — include once; toggle via html[data-theme="light"|"dark"] */

html[data-theme="dark"] {
  --dark: initial;
  --light: ;
}

html[data-theme="light"] {
  --dark: ;
  --light: initial;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --dark: initial;
    --light: ;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --dark: ;
    --light: initial;
  }
}

:root {
  --bg: var(--dark, #171d18) var(--light, #f7f8f4);
  --surface: var(--dark, #242d25) var(--light, #ffffff);
  --surface-2: var(--dark, #2c362d) var(--light, #eff2ea);
  --text: var(--dark, #f2f4ea) var(--light, #20251c);
  --text-2: var(--dark, #aab5a4) var(--light, #66705e);
  --border: var(--dark, #3a463a) var(--light, #dfe4d9);
  --accent: var(--dark, #d7e47d) var(--light, #fec251);
  --accent-text: var(--dark, #d7e47d) var(--light, #79500f);
  --success: var(--dark, #b9d987) var(--light, #526f32);
  --info: var(--dark, #b9e4eb) var(--light, #376777);
  --warning: var(--dark, #ffd77f) var(--light, #a66b13);
  --danger: var(--dark, #ff9b8e) var(--light, #b94d42);

  /* On-accent fill text: dark ink on light accent, dark surface on dark accent */
  --on-accent: var(--dark, #171d18) var(--light, #79500f);
  --focus-ring: var(--accent);
}