/*
 * Theme color tokens — loaded BEFORE Tailwind so the JIT compiler
 * cannot resolve var() references at build time.
 *
 * All color tokens are space-separated RGB channels so Tailwind's
 * <alpha-value> placeholder works (e.g. bg-primary/40).
 *
 * Brand: Teal primary (#0D9488), Amber secondary (#D97706).
 * Themes: Light + Dark only.
 */

:root {
  /* Light theme (default) */
  --color-primary: 13 148 136;
  --color-primary-hover: 15 118 110;
  --color-primary-active: 17 94 89;
  --color-primary-container: 204 251 241;
  --color-primary-container-hover: 153 246 228;
  --color-primary-container-active: 94 234 212;
  --color-secondary: 217 119 6;
  --color-secondary-hover: 180 83 9;
  --color-secondary-active: 146 64 14;
  --color-surface: 248 250 252;
  --color-surface-variant: 238 242 247;
  --color-surface-elevated: 255 255 255;
  --color-surface-pressed: 226 232 240;
  --color-outline: 214 222 232;
  --color-on-surface: 31 41 55;
  --color-on-primary: 255 255 255;
  --color-error: 185 28 28;
  --color-error-hover: 153 27 27;
  --color-error-active: 127 29 29;
  --color-on-surface-variant: 100 116 139;
  --color-on-error: 255 255 255;
  --color-success: 5 150 105;
  --color-success-hover: 4 120 87;
  --color-success-container: 209 250 229;
  --color-on-success: 255 255 255;
  --color-warning: 217 119 6;
  --color-warning-hover: 180 83 9;
  --color-warning-container: 254 243 199;
  --color-on-warning: 255 255 255;
  --color-info: 2 132 199;
  --color-info-hover: 3 105 161;
  --color-info-container: 224 242 254;
  --color-on-info: 255 255 255;
  --color-error-container: 254 226 226;

  /* Non-channel tokens (contain alpha or complex values) */
  --color-scrim: rgba(15, 23, 42, 0.40);
  --shadow-md3: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md3-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-md3-modal: 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.10);
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);

  --ui-scrollbar-thumb: rgb(var(--color-primary) / 0.35);
  --ui-scrollbar-thumb-strong: rgb(var(--color-primary) / 0.45);
}

[data-theme="dark"] {
  --color-primary: 45 212 191;
  --color-primary-hover: 94 234 212;
  --color-primary-active: 20 184 166;
  --color-primary-container: 19 78 74;
  --color-primary-container-hover: 17 94 89;
  --color-primary-container-active: 15 118 110;
  --color-secondary: 251 191 36;
  --color-secondary-hover: 252 211 77;
  --color-secondary-active: 245 158 11;
  --color-surface: 15 23 42;
  --color-surface-variant: 30 41 59;
  --color-surface-elevated: 30 41 59;
  --color-surface-pressed: 51 65 85;
  --color-outline: 51 65 85;
  --color-on-surface: 226 232 240;
  --color-on-primary: 15 23 42;
  --color-error: 252 165 165;
  --color-error-hover: 248 113 113;
  --color-error-active: 239 68 68;
  --color-on-surface-variant: 148 163 184;
  --color-on-error: 15 23 42;
  --color-success: 52 211 153;
  --color-success-hover: 110 231 183;
  --color-success-container: 6 78 59;
  --color-on-success: 15 23 42;
  --color-warning: 251 191 36;
  --color-warning-hover: 252 211 77;
  --color-warning-container: 120 53 15;
  --color-on-warning: 15 23 42;
  --color-info: 56 189 248;
  --color-info-hover: 125 211 252;
  --color-info-container: 12 74 110;
  --color-on-info: 15 23 42;
  --color-error-container: 127 29 29;
  --color-scrim: rgba(0, 0, 0, 0.50);
  --shadow-md3: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md3-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.16);
  --shadow-md3-modal: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.20);
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
}