/* JNOS Performance — shared theme tokens (light + dark). Values are "R G B" so Tailwind's
   rgb(var(--color-x) / <alpha-value>) pattern can apply opacity modifiers (e.g. bg-primary/50). */
:root {
  --color-background: 255 248 247;
  --color-error: 186 26 26;
  --color-error-container: 255 218 214;
  --color-inverse-on-surface: 251 238 236;
  --color-inverse-primary: 255 179 177;
  --color-inverse-surface: 54 47 46;
  --color-on-background: 32 26 25;
  --color-on-error: 255 255 255;
  --color-on-error-container: 65 0 2;
  --color-on-primary: 255 255 255;
  --color-on-primary-container: 255 250 249;
  --color-on-primary-fixed: 65 0 7;
  --color-on-primary-fixed-variant: 146 0 29;
  --color-on-secondary: 255 255 255;
  --color-on-secondary-container: 26 28 28;
  --color-on-secondary-fixed: 26 28 28;
  --color-on-secondary-fixed-variant: 69 71 71;
  --color-on-surface: 32 26 25;
  --color-on-surface-variant: 83 67 65;
  --color-on-tertiary: 255 255 255;
  --color-on-tertiary-container: 0 32 34;
  --color-on-tertiary-fixed: 0 31 35;
  --color-on-tertiary-fixed-variant: 0 79 87;
  --color-outline: 133 115 112;
  --color-outline-variant: 216 194 190;
  --color-primary: 154 0 34;
  --color-primary-container: 227 24 55;
  --color-primary-fixed: 255 218 216;
  --color-primary-fixed-dim: 255 179 177;
  --color-secondary: 92 95 94;
  --color-secondary-container: 224 227 225;
  --color-secondary-fixed: 226 226 226;
  --color-secondary-fixed-dim: 198 198 199;
  --color-surface: 255 248 247;
  --color-surface-bright: 255 248 247;
  --color-surface-container: 251 233 231;
  --color-surface-container-high: 246 227 225;
  --color-surface-container-highest: 240 221 219;
  --color-surface-container-low: 254 240 238;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-dim: 231 214 212;
  --color-surface-tint: 154 0 34;
  --color-surface-variant: 244 221 219;
  --color-tertiary: 0 105 111;
  --color-tertiary-container: 157 234 249;
  --color-tertiary-fixed: 147 241 254;
  --color-tertiary-fixed-dim: 119 212 225;
}

.dark {
  --color-background: 19 19 19;
  --color-error: 255 180 171;
  --color-error-container: 147 0 10;
  --color-inverse-on-surface: 48 48 48;
  --color-inverse-primary: 191 0 41;
  --color-inverse-surface: 226 226 226;
  --color-on-background: 226 226 226;
  --color-on-error: 105 0 5;
  --color-on-error-container: 255 218 214;
  --color-on-primary: 104 0 17;
  --color-on-primary-container: 255 250 249;
  --color-on-primary-fixed: 65 0 7;
  --color-on-primary-fixed-variant: 146 0 29;
  --color-on-secondary: 47 49 49;
  --color-on-secondary-container: 180 181 181;
  --color-on-secondary-fixed: 26 28 28;
  --color-on-secondary-fixed-variant: 69 71 71;
  --color-on-surface: 226 226 226;
  --color-on-surface-variant: 230 189 187;
  --color-on-tertiary: 0 54 60;
  --color-on-tertiary-container: 242 253 255;
  --color-on-tertiary-fixed: 0 31 35;
  --color-on-tertiary-fixed-variant: 0 79 87;
  --color-outline: 173 136 134;
  --color-outline-variant: 93 63 62;
  --color-primary: 255 179 177;
  --color-primary-container: 227 24 55;
  --color-primary-fixed: 255 218 216;
  --color-primary-fixed-dim: 255 179 177;
  --color-secondary: 198 198 199;
  --color-secondary-container: 69 71 71;
  --color-secondary-fixed: 226 226 226;
  --color-secondary-fixed-dim: 198 198 199;
  --color-surface: 19 19 19;
  --color-surface-bright: 57 57 57;
  --color-surface-container: 31 31 31;
  --color-surface-container-high: 42 42 42;
  --color-surface-container-highest: 53 53 53;
  --color-surface-container-low: 27 27 27;
  --color-surface-container-lowest: 14 14 14;
  --color-surface-dim: 19 19 19;
  --color-surface-tint: 255 179 177;
  --color-surface-variant: 53 53 53;
  --color-tertiary: 119 212 225;
  --color-tertiary-container: 0 128 140;
  --color-tertiary-fixed: 147 241 254;
  --color-tertiary-fixed-dim: 119 212 225;
}

/* Browser autofill (mobile Safari especially, also Chrome) applies its own internal
   text color that ignores the page's `color`/text-utility classes entirely — only
   `-webkit-text-fill-color` (and Firefox's `:autofill`) can override it. Without this,
   autofilled/suggested field values render in a washed-out grey regardless of theme.
   The huge inset box-shadow is the standard trick to also kill the ugly yellow/blue
   autofill background tint, keeping the field's own surface color instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--color-on-surface)) !important;
  caret-color: rgb(var(--color-on-surface));
  box-shadow: 0 0 0px 1000px rgb(var(--color-surface)) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

input:autofill,
textarea:autofill,
select:autofill {
  color: rgb(var(--color-on-surface)) !important;
}