/* ============================================================
   MainteNex design tokens.
   Light values come from the app's own Material theme; dark values
   from the dark mockup. Every colour is an "R G B" triple so Tailwind
   can apply an alpha to it via rgb(var(--c-x) / <alpha-value>).
   ============================================================ */

:root {
  --c-background: 252 249 248;
  --c-error: 186 26 26;
  --c-error-container: 255 218 214;
  --c-inverse-on-surface: 243 240 239;
  --c-inverse-primary: 248 172 255;
  --c-inverse-surface: 48 48 48;
  --c-on-background: 27 28 28;
  --c-on-error: 255 255 255;
  --c-on-error-container: 147 0 10;
  --c-on-primary: 255 255 255;
  --c-on-primary-container: 250 183 255;
  --c-on-primary-fixed: 53 0 64;
  --c-on-primary-fixed-variant: 123 0 144;
  --c-on-secondary: 255 255 255;
  --c-on-secondary-container: 0 64 105;
  --c-on-secondary-fixed: 0 29 52;
  --c-on-secondary-fixed-variant: 0 74 120;
  --c-on-surface: 27 28 28;
  --c-on-surface-variant: 81 66 81;
  --c-on-tertiary: 255 255 255;
  --c-on-tertiary-container: 204 200 255;
  --c-on-tertiary-fixed: 16 0 105;
  --c-on-tertiary-fixed-variant: 54 34 202;
  --c-outline: 131 114 130;
  --c-outline-variant: 213 192 210;
  --c-primary: 112 0 132;
  --c-primary-container: 148 14 172;
  --c-primary-fixed: 255 214 254;
  --c-primary-fixed-dim: 248 172 255;
  --c-secondary: 0 98 157;
  --c-secondary-container: 79 175 255;
  --c-secondary-fixed: 207 229 255;
  --c-secondary-fixed-dim: 153 203 255;
  --c-surface: 252 249 248;
  --c-surface-bright: 252 249 248;
  --c-surface-container: 240 237 237;
  --c-surface-container-high: 234 231 231;
  --c-surface-container-highest: 229 226 225;
  --c-surface-container-low: 246 243 242;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-dim: 220 217 217;
  --c-surface-tint: 156 29 180;
  --c-surface-variant: 229 226 225;
  --c-tertiary: 46 21 197;
  --c-tertiary-container: 72 59 219;
  --c-tertiary-fixed: 227 223 255;
  --c-tertiary-fixed-dim: 196 192 255;
  color-scheme: light;
}

html.dark {
  --c-background: 13 14 21;
  --c-error: 255 180 171;
  --c-error-container: 147 0 10;
  --c-inverse-on-surface: 47 48 56;
  --c-inverse-primary: 160 0 191;
  --c-inverse-surface: 227 225 236;
  --c-on-background: 241 240 247;
  --c-on-error: 105 0 5;
  --c-on-error-container: 255 218 214;
  --c-on-primary: 86 0 104;
  --c-on-primary-container: 255 245 251;
  --c-on-primary-fixed: 53 0 64;
  --c-on-primary-fixed-variant: 122 0 146;
  --c-on-secondary: 0 51 85;
  --c-on-secondary-container: 207 229 255;
  --c-on-secondary-fixed: 0 29 52;
  --c-on-secondary-fixed-variant: 0 74 120;
  --c-on-surface: 241 240 247;
  --c-on-surface-variant: 160 165 184;
  --c-on-tertiary: 32 0 164;
  --c-on-tertiary-container: 250 246 255;
  --c-on-tertiary-fixed: 16 0 105;
  --c-on-tertiary-fixed-variant: 54 34 202;
  --c-outline: 81 86 116;
  --c-outline-variant: 40 45 69;
  --c-primary: 247 173 255;
  --c-primary-container: 184 41 214;
  --c-primary-fixed: 254 214 255;
  --c-primary-fixed-dim: 247 173 255;
  --c-secondary: 153 203 255;
  --c-secondary-container: 44 150 229;
  --c-secondary-fixed: 207 229 255;
  --c-secondary-fixed-dim: 153 203 255;
  --c-surface: 13 14 21;
  --c-surface-bright: 41 45 66;
  --c-surface-container: 26 29 45;
  --c-surface-container-high: 30 33 51;
  --c-surface-container-highest: 37 41 61;
  --c-surface-container-low: 22 24 36;
  --c-surface-container-lowest: 18 19 26;
  --c-surface-dim: 13 14 21;
  --c-surface-tint: 247 173 255;
  --c-surface-variant: 35 38 59;
  --c-tertiary: 196 192 255;
  --c-tertiary-container: 99 90 246;
  --c-tertiary-fixed: 227 223 255;
  --c-tertiary-fixed-dim: 196 192 255;
  color-scheme: dark;
}

body { -webkit-font-smoothing: antialiased; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* The dark mockup leans on soft brand glows that the light design does not use. */
html.dark .brand-glow { box-shadow: 0 0 20px rgb(var(--c-primary-container) / 0.40); }
html.dark .brand-glow:hover { box-shadow: 0 0 28px rgb(var(--c-secondary-container) / 0.60); }
html.dark .logo-mark { filter: brightness(1.1) drop-shadow(0 0 8px rgb(var(--c-primary-container) / 0.40)); }

/* Respect a reduced-motion preference for the hover lifts used throughout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}