/*
  Catppuccin flavor tokens for light (Latte) and dark (Mocha).
  `mocha-*` CSS variables are theme-aware: they resolve to Latte in light mode
  and Mocha when `html.dark` is present, so existing utility names keep working.
*/

html {
  color-scheme: light;

  /* Latte gray scale — standard light semantics (50 light → 950 dark).
     Text steps are intentionally darker than stock Latte for body contrast
     on base/mantle/surface0. */
  --color-gray-50: 239 241 245;   /* base */
  --color-gray-100: 230 233 239;  /* mantle */
  --color-gray-200: 220 224 232;  /* crust */
  --color-gray-300: 204 208 218;  /* surface0 */
  --color-gray-400: 140 143 161;  /* overlay1-ish */
  --color-gray-500: 108 111 133;  /* subtext0 */
  --color-gray-600: 92 95 119;    /* subtext1 */
  --color-gray-700: 76 79 105;    /* latte text */
  --color-gray-800: 54 58 79;     /* dark body */
  --color-gray-900: 46 49 72;     /* default / headings */
  --color-gray-950: 30 32 48;     /* deepest text */

  /* Theme-aware surface tokens (Latte) — used by bg-mocha-* utilities */
  --mocha-base: #eff1f5;
  --mocha-base-rgb: 239 241 245;
  --mocha-mantle: #e6e9ef;
  --mocha-mantle-rgb: 230 233 239;
  --mocha-crust: #dce0e8;
  --mocha-crust-rgb: 220 224 232;
  --mocha-surface0: #ccd0da;
  --mocha-surface0-rgb: 204 208 218;
  --mocha-surface1: #bcc0cc;
  --mocha-surface1-rgb: 188 192 204;
  --mocha-surface2: #acb0be;
  --mocha-surface2-rgb: 172 176 190;
  --mocha-overlay0: #9ca0b0;
  --mocha-overlay0-rgb: 156 160 176;
  --mocha-text: #2e3148;
  --mocha-text-rgb: 46 49 72;
  --mocha-subtext0: #5c5f77;
  --mocha-subtext0-rgb: 92 95 119;
  --mocha-blue: #1e66f5;
  --mocha-sky: #04a5e5;

  /* Accent channels (Latte) */
  --ctp-rosewater-rgb: 220 138 120;
  --ctp-pink-rgb: 234 118 203;
  --ctp-red-rgb: 210 15 57;
  --ctp-maroon-rgb: 230 69 83;
  --ctp-peach-rgb: 254 100 11;
  --ctp-yellow-rgb: 223 142 29;
  --ctp-green-rgb: 64 160 43;
  --ctp-teal-rgb: 23 146 153;
  --ctp-sky-rgb: 4 165 229;
  --ctp-sky-hover-rgb: 2 140 196;
  --ctp-sapphire-rgb: 32 159 181;
  --ctp-blue-rgb: 30 102 245;

  /* Arcade accents — Latte */
  --arcade-primary: #04a5e5;
  --arcade-primary-rgb: 4, 165, 229;
  --arcade-hot: #ea76cb;
  --arcade-hot-rgb: 234, 118, 203;
  --arcade-coin: #fe640b;
  --arcade-coin-rgb: 254, 100, 11;
  --arcade-clear: #df8e1d;
  --arcade-clear-rgb: 223, 142, 29;
  --arcade-1up: #40a02b;
  --arcade-1up-rgb: 64, 160, 43;
  --arcade-danger: #d20f39;
  --arcade-danger-rgb: 210, 15, 57;
  --arcade-combo: #209fb5;
  --arcade-combo-rgb: 32, 159, 181;

  --ghost-accent-color: var(--arcade-primary);
  --ghost-accent-color-rgb: var(--arcade-primary-rgb);
  --color-contrast: #eff1f5;
  --tc-accent-color: var(--arcade-primary);
  --tc-accent-color-rgb: var(--arcade-primary-rgb);
  --tc-color-contrast: #eff1f5;
  --tc-secondary-color: var(--arcade-hot);
  --tc-secondary-color-rgb: var(--arcade-hot-rgb);

  --content-link-hover: #209fb5; /* latte sapphire */
  --scrollbar-track: #e6e9ef;
  --scrollbar-thumb: #bcc0cc;
  --scrollbar-thumb-hover: #acb0be;
}

html.dark {
  color-scheme: dark;

  /* Mocha gray scale — dark-first mapping (aligned with historical app tokens) */
  --color-gray-50: 248 250 252;
  --color-gray-100: 241 245 249;
  --color-gray-200: 186 194 222;  /* subtext1 */
  --color-gray-300: 205 214 244;  /* text */
  --color-gray-400: 166 173 200;  /* subtext0 */
  --color-gray-500: 108 112 134;  /* overlay0 */
  --color-gray-600: 88 91 112;    /* surface2 */
  --color-gray-700: 69 71 90;     /* surface1 */
  --color-gray-800: 49 50 68;     /* surface0 */
  --color-gray-900: 24 24 37;     /* mantle */
  --color-gray-950: 17 17 27;     /* crust */

  --mocha-base: #1e1e2e;
  --mocha-base-rgb: 30 30 46;
  --mocha-mantle: #181825;
  --mocha-mantle-rgb: 24 24 37;
  --mocha-crust: #11111b;
  --mocha-crust-rgb: 17 17 27;
  --mocha-surface0: #313244;
  --mocha-surface0-rgb: 49 50 68;
  --mocha-surface1: #45475a;
  --mocha-surface1-rgb: 69 71 90;
  --mocha-surface2: #585b70;
  --mocha-surface2-rgb: 88 91 112;
  --mocha-overlay0: #6c7086;
  --mocha-overlay0-rgb: 108 112 134;
  --mocha-text: #cdd6f4;
  --mocha-text-rgb: 205 214 244;
  --mocha-subtext0: #a6adc8;
  --mocha-subtext0-rgb: 166 173 200;
  --mocha-blue: #89b4fa;
  --mocha-sky: #89dceb;

  --ctp-rosewater-rgb: 245 224 220;
  --ctp-pink-rgb: 245 194 231;
  --ctp-red-rgb: 243 139 168;
  --ctp-maroon-rgb: 235 160 172;
  --ctp-peach-rgb: 250 179 135;
  --ctp-yellow-rgb: 249 226 175;
  --ctp-green-rgb: 166 227 161;
  --ctp-teal-rgb: 148 226 213;
  --ctp-sky-rgb: 137 220 235;
  --ctp-sky-hover-rgb: 110 207 223;
  --ctp-sapphire-rgb: 116 199 236;
  --ctp-blue-rgb: 137 180 250;

  --arcade-primary: #89dceb;
  --arcade-primary-rgb: 137, 220, 235;
  --arcade-hot: #f5c2e7;
  --arcade-hot-rgb: 245, 194, 231;
  --arcade-coin: #fab387;
  --arcade-coin-rgb: 250, 179, 135;
  --arcade-clear: #f9e2af;
  --arcade-clear-rgb: 249, 226, 175;
  --arcade-1up: #a6e3a1;
  --arcade-1up-rgb: 166, 227, 161;
  --arcade-danger: #f38ba8;
  --arcade-danger-rgb: 243, 139, 168;
  --arcade-combo: #74c7ec;
  --arcade-combo-rgb: 116, 199, 236;

  --ghost-accent-color: var(--arcade-primary);
  --ghost-accent-color-rgb: var(--arcade-primary-rgb);
  --color-contrast: #1e1e2e;
  --tc-accent-color: var(--arcade-primary);
  --tc-accent-color-rgb: var(--arcade-primary-rgb);
  --tc-color-contrast: #1e1e2e;
  --tc-secondary-color: var(--arcade-hot);
  --tc-secondary-color-rgb: var(--arcade-hot-rgb);

  --content-link-hover: #b8eef5;
  --scrollbar-track: #181825;
  --scrollbar-thumb: #45475a;
  --scrollbar-thumb-hover: #585b70;
}

/* Page chrome follows active flavor */
html:not(.dark) body {
  background-color: var(--mocha-base, #eff1f5);
}

html.dark body,
body.dark {
  background-color: var(--mocha-mantle, #181825);
}