:root {
  /* Space-separated RGB for Tailwind: rgb(var(--x) / <alpha>) */

  /* Base */
  --mdc-color-background: 240 253 244; /* #F0FDF4 */
  --mdc-color-surface: 255 255 255; /* #FFFFFF */

  /* Brand & Primary */
  --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-focus-ring: 34 197 94; /* brand-500 */

  /* Semantic (Danger / Success / Info) */
  --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-color-error: var(--mdc-color-danger); /* alias: same as danger */
  --mdc-color-success: 21 128 61; /* same as primary (explicit success state) */
  --mdc-color-info: 14 165 233; /* sky-500 */
  --mdc-color-info-hover: 2 132 199; /* sky-600 - deeper for hover */
  --mdc-color-on-info: 255 255 255;

  /* Surfaces & Borders */
  --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 */

  /* Form / inputs */
  --mdc-color-input-border-focus: 21 128 61; /* matches primary */
  --mdc-focus-ring-input: 34 197 94; /* focus ring color for text fields */
  --mdc-input-focus-ring-opacity: 0.32;
  --mdc-color-on-surface-disabled: 148 163 184; /* slate-400 */
  --mdc-color-input-readonly-bg: 248 250 252; /* slate-50 */
  --mdc-color-input-error-bg: 255 241 242; /* rose-50 */

  /* Links */
  --mdc-color-link: 21 128 61;
  --mdc-color-link-hover: 22 101 52;
  --mdc-color-link-visited: 67 56 202; /* indigo-600 */

  /* Elevation (full box-shadow strings) */
  --mdc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --mdc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --mdc-radius-input: 0.5rem;

  /* Motion */
  --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 {
  /* Base */
  --mdc-color-background: 6 20 13; /* ~#06140D */
  --mdc-color-surface: 12 31 20; /* ~#0C1F14 */

  /* Brand & Primary */
  --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-focus-ring: 74 222 128; /* brand-400 */

  /* Semantic (Danger / Success / Info) */
  --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-color-error: var(--mdc-color-danger); /* alias: same as danger */
  --mdc-color-success: 74 222 128; /* same as primary (explicit success state) */
  --mdc-color-info: 56 189 248; /* sky-400 */
  --mdc-color-info-hover: 14 165 233; /* sky-500 - slightly deeper for hover */
  --mdc-color-on-info: 2 6 23; /* slate-950 */

  /* Surfaces & Borders */
  --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 */

  /* Form / inputs — softer focus ring in dark */
  --mdc-color-input-border-focus: 74 222 128;
  --mdc-focus-ring-input: 52 211 153; /* brand-500 */
  --mdc-input-focus-ring-opacity: 0.2;
  --mdc-color-on-surface-disabled: 100 120 110;
  --mdc-color-input-readonly-bg: 20 45 30;
  --mdc-color-input-error-bg: 40 22 28;

  /* Links */
  --mdc-color-link: 74 222 128;
  --mdc-color-link-hover: 52 211 153;
  --mdc-color-link-visited: 129 140 248; /* indigo-400 */

  --mdc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
  --mdc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.2);

  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;
  }
}