:root {
  /* Core theme tokens (space-separated RGB for Tailwind rgb(var(--x) / a)) */
  --mdc-color-background: 240 253 244; /* #F0FDF4 */
  --mdc-color-surface: 255 255 255; /* #FFFFFF */
  --mdc-color-on-surface: 15 23 42; /* slate-900 */
  --mdc-color-on-surface-muted: 71 85 105; /* slate-600 */
  --mdc-color-outline: 226 232 240; /* slate-200 */

  --mdc-color-primary: 21 128 61; /* brand-700 (#15803d) */
  --mdc-color-primary-hover: 22 101 52; /* brand-800 (#166534) - darker for hover */
  --mdc-color-on-primary: 255 255 255;
  --mdc-color-primary-container: 220 252 231; /* brand-100 */
  --mdc-color-primary-container-hover: 187 247 208; /* brand-200 - slightly darker tint for hover */
  --mdc-color-on-primary-container: 20 83 45; /* brand-900-ish */

  --mdc-color-danger: 225 29 72; /* rose-600 */
  --mdc-color-danger-hover: 190 18 60; /* rose-700 - darker for hover */
  --mdc-color-on-danger: 255 255 255;

  --mdc-focus-ring: 34 197 94; /* brand-500 */

  /* Motion tokens */
  --mdc-motion-duration-short: 120ms;
  --mdc-motion-duration-medium: 200ms;
  --mdc-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

html.dark {
  /* Forest-green dark mode (tinted, not navy) */
  --mdc-color-background: 6 20 13; /* ~#06140D */
  --mdc-color-surface: 12 31 20; /* ~#0C1F14 */
  --mdc-color-on-surface: 226 235 230; /* slightly warm/green-tinted off-white */
  --mdc-color-on-surface-muted: 150 170 160; /* muted green-gray */
  --mdc-color-outline: 36 69 52; /* ~#244534 */

  --mdc-color-primary: 74 222 128; /* brand-400 */
  --mdc-color-primary-hover: 52 211 153; /* brand-500 - slightly deeper for hover */
  --mdc-color-on-primary: 2 6 23; /* slate-950 */
  --mdc-color-primary-container: 20 83 45; /* brand-900-ish */
  --mdc-color-primary-container-hover: 22 101 52; /* brand-800 - slightly lighter for hover */
  --mdc-color-on-primary-container: 220 252 231; /* brand-100 */

  --mdc-color-danger: 251 113 133; /* rose-400 */
  --mdc-color-danger-hover: 244 63 94; /* rose-500 - slightly deeper for hover */
  --mdc-color-on-danger: 2 6 23;

  --mdc-focus-ring: 74 222 128; /* brand-400 */

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mdc-motion-duration-short: 0ms;
    --mdc-motion-duration-medium: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}