/* Theme System
   Naming Conventions:
   - Palette: --color-<category>-<scale>
   - Mode: --<name>-light and --<name>-dark
   - Aliases: --color-* and --icon-* resolve current mode
   - Hierarchy: Palette → Mode tokens → Aliases → Components
   - Backward compatibility preserved via alias mapping
   - Detection: data-theme attribute; prefers-color-scheme when unset
*/
:root {
  /* Aliased tokens are defined later; direct assignments removed */

  --color-primary-50: 239 246 255;
  --color-primary-100: 219 234 254;
  --color-primary-200: 191 219 254;
  --color-primary-300: 147 197 253;
  --color-primary-400: 96 165 250;
  --color-primary-500: 59 130 246;
  --color-primary-600: 37 99 235;
  --color-primary-700: 29 78 216;
  --color-primary-800: 30 64 175;
  --color-primary-900: 30 58 138;
  --color-primary-950: 23 37 84;

  --color-secondary-50: 248 250 252;
  --color-secondary-100: 241 245 249;
  --color-secondary-200: 226 232 240;
  --color-secondary-300: 203 213 225;
  --color-secondary-400: 148 163 184;
  --color-secondary-500: 100 116 139;
  --color-secondary-600: 71 85 99;
  --color-secondary-700: 51 65 85;
  --color-secondary-800: 30 41 59;
  --color-secondary-900: 15 23 42;
  --color-secondary-950: 2 6 23;

  --color-neutral-0: 255 255 255;
  --color-neutral-50: 249 250 251;
  --color-neutral-100: 243 244 246;
  --color-neutral-200: 229 231 235;
  --color-neutral-300: 209 213 219;
  --color-neutral-400: 156 163 175;
  --color-neutral-500: 107 114 128;
  --color-neutral-600: 75 85 99;
  --color-neutral-700: 55 65 81;
  --color-neutral-800: 31 41 55;
  --color-neutral-900: 17 24 39;

  --color-success-50: 240 253 244;
  --color-success-100: 220 252 231;
  --color-success-200: 187 247 208;
  --color-success-300: 134 239 172;
  --color-success-400: 74 222 128;
  --color-success-500: 34 197 94;
  --color-success-600: 22 163 74;
  --color-success-700: 21 128 61;
  --color-success-800: 22 101 52;
  --color-success-900: 20 83 45;

  --color-warning-50: 255 251 235;
  --color-warning-100: 254 243 199;
  --color-warning-200: 253 230 138;
  --color-warning-300: 252 211 77;
  --color-warning-400: 251 191 36;
  --color-warning-500: 245 158 11;
  --color-warning-600: 217 119 6;
  --color-warning-700: 180 83 9;
  --color-warning-800: 146 64 14;
  --color-warning-900: 120 53 15;

  --color-error-50: 255 241 242;
  --color-error-100: 255 228 231;
  --color-error-200: 254 205 211;
  --color-error-300: 253 164 175;
  --color-error-400: 251 113 133;
  --color-error-500: 244 63 94;
  --color-error-600: 225 29 72;
  --color-error-700: 190 18 60;
  --color-error-800: 159 18 57;
  --color-error-900: 136 19 55;

  --color-info-50: 224 242 242;
  --color-info-100: 204 240 240;
  --color-info-200: 165 243 252;
  --color-info-300: 103 232 249;
  --color-info-400: 34 211 238;
  --color-info-500: 6 182 212;
  --color-info-600: 8 145 178;
  --color-info-700: 14 116 144;
  --color-info-800: 21 94 117;
  --color-info-900: 22 78 99;
  --color-ocean-500: 14 165 233;
  --color-emerald-500: 16 185 129;

  /* Mode tokens: Light */
  --color-primary-light: var(--color-primary-600);
  --color-primary-hover-light: var(--color-primary-700);
  --color-primary-active-light: var(--color-primary-800);

  --color-secondary-light: var(--color-secondary-600);
  --color-secondary-hover-light: var(--color-secondary-700);
  --color-secondary-active-light: var(--color-secondary-800);

  --color-success-light: var(--color-success-600);
  --color-warning-light: var(--color-warning-600);
  --color-error-light: var(--color-error-600);
  --color-info-light: var(--color-info-600);
  --color-ocean-light: var(--color-ocean-500);
  --color-emerald-light: var(--color-emerald-500);

  --color-bg-light: 249 250 251;
  --color-bg-secondary-light: 255 255 255;
  --color-border-light: 229 231 235;

  --color-text-primary-light: 17 24 39;
  --color-text-secondary-light: 75 85 99;
  --color-text-muted-light: 156 163 175;

  --icon-default-light: 107 114 128;
  --icon-hover-light: 55 65 81;
  --icon-active-light: 17 24 39;
  --icon-disabled-light: 209 213 219;

  /* Aliases: resolve to current mode (default: light) */
  --color-primary: var(--color-primary-light, 37 99 235);
  --color-primary-hover: var(--color-primary-hover-light, 29 78 216);
  --color-primary-active: var(--color-primary-active-light, 30 64 175);

  --color-secondary: var(--color-secondary-light, 71 85 99);
  --color-secondary-hover: var(--color-secondary-hover-light, 51 65 85);
  --color-secondary-active: var(--color-secondary-active-light, 30 41 59);

  --color-success: var(--color-success-light, 22 163 74);
  --color-warning: var(--color-warning-light, 217 119 6);
  --color-error: var(--color-error-light, 225 29 72);
  --color-info: var(--color-info-light, 8 145 178);

  --color-bg: var(--color-bg-light, 249 250 251);
  --color-bg-secondary: var(--color-bg-secondary-light, 255 255 255);
  --color-border: var(--color-border-light, 229 231 235);

  --color-text-primary: var(--color-text-primary-light, 17 24 39);
  --color-text-secondary: var(--color-text-secondary-light, 75 85 99);
  --color-text-muted: var(--color-text-muted-light, 156 163 175);

  --icon-default: var(--icon-default-light, 107 114 128);
  --icon-hover: var(--icon-hover-light, 55 65 81);
  --icon-active: var(--icon-active-light, 17 24 39);
  --icon-disabled: var(--icon-disabled-light, 209 213 219);
  --color-ocean: var(--color-ocean-light, 14 165 233);
  --color-emerald: var(--color-emerald-light, 16 185 129);

  /* Light theme component tokens */
  --light-theme-btn-primary-bg: var(--color-primary-600);
  --light-theme-btn-primary-text: var(--color-neutral-0);
  --light-theme-btn-primary-hover-bg: var(--color-primary-700);
  --light-theme-btn-primary-active-bg: var(--color-primary-800);
  --light-theme-btn-primary-border: var(--color-primary-600);

  --light-theme-btn-secondary-bg: var(--color-bg-secondary);
  --light-theme-btn-secondary-text: var(--color-text-primary);
  --light-theme-btn-secondary-hover-bg: var(--color-neutral-50);
  --light-theme-btn-secondary-border: var(--color-border);

  --light-theme-btn-success-bg: var(--color-success);
  --light-theme-btn-success-hover-bg: var(--color-success-600);
  --light-theme-btn-success-active-bg: var(--color-success-700);
  --light-theme-btn-success-text: var(--color-neutral-0);

  --light-theme-btn-warning-bg: var(--color-warning);
  --light-theme-btn-warning-hover-bg: var(--color-warning-600);
  --light-theme-btn-warning-active-bg: var(--color-warning-700);
  --light-theme-btn-warning-text: var(--color-neutral-0);

  --light-theme-btn-error-bg: var(--color-error);
  --light-theme-btn-error-hover-bg: var(--color-error-600);
  --light-theme-btn-error-active-bg: var(--color-error-700);
  --light-theme-btn-error-text: var(--color-neutral-0);

  --light-theme-input-text: var(--color-text-primary);
  --light-theme-input-bg: var(--color-bg-secondary);
  --light-theme-input-border: var(--color-border);
  --light-theme-input-placeholder: var(--color-text-muted);
  --light-theme-input-focus-color: var(--color-primary-500);
  --light-theme-input-hover-bg: var(--color-neutral-50);
  --light-theme-input-hover-border: var(--color-border);

  --light-theme-dropdown-bg: var(--color-bg-secondary);
  --light-theme-dropdown-text: var(--color-text-primary);
  --light-theme-dropdown-border: var(--color-border);
  --light-theme-dropdown-hover-bg: var(--color-neutral-50);
  --light-theme-dropdown-hover-text: var(--color-text-primary);
  --light-theme-dropdown-selected-bg: var(--color-primary-50);
  --light-theme-dropdown-selected-text: var(--color-primary-700);
  --light-theme-dropdown-shadow: 0 10px 24px rgba(0,0,0,0.15);

  --light-theme-table-bg: var(--color-bg-secondary);
  --light-theme-table-text: var(--color-neutral-600);
  --light-theme-table-border: var(--color-border);
  --light-theme-table-header-bg: var(--color-neutral-50);
  --light-theme-table-header-text: var(--color-neutral-700);
  --light-theme-table-row-bg: var(--color-bg-secondary);
  --light-theme-table-row-hover-bg: var(--color-neutral-50);

  --light-theme-toast-bg: var(--color-bg-secondary);
  --light-theme-toast-text: var(--color-text-primary);
  --light-theme-toast-border: var(--color-border);
  --light-theme-toast-shadow: 0 15px 30px rgba(0,0,0,0.20);

  --light-theme-toast-success-bg: var(--color-success-50);
  --light-theme-toast-success-text: var(--color-success-800);
  --light-theme-toast-success-border: var(--color-success-300);

  --light-theme-toast-warning-bg: var(--color-warning-50);
  --light-theme-toast-warning-text: var(--color-warning-800);
  --light-theme-toast-warning-border: var(--color-warning-300);

  --light-theme-toast-error-bg: var(--color-error-50);
  --light-theme-toast-error-text: var(--color-error-800);
  --light-theme-toast-error-border: var(--color-error-300);

  --light-theme-toast-info-bg: var(--color-primary-50);
  --light-theme-toast-info-text: var(--color-primary-800);
  --light-theme-toast-info-border: var(--color-primary-300);

  --light-theme-disabled-bg: var(--color-neutral-100);
  --light-theme-disabled-text: var(--color-neutral-500);
  --light-theme-disabled-border: var(--color-neutral-200);
  --light-theme-transition-duration-default: 150ms;
  --light-theme-transition-duration-fast: 100ms;
  --light-theme-transition-duration-slow: 300ms;
  --light-theme-transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --light-theme-opacity-disabled: 0.60;
  --light-theme-opacity-overlay: 0.40;
  --light-theme-opacity-muted: 0.80;
  --light-theme-opacity-hover: 0.95;
}
/* Duplicate :root block removed during theme system rewrite */

[data-theme="dark"] {
  /* Mode tokens: Dark */
  --color-primary-dark: var(--color-primary-500);
  --color-primary-hover-dark: var(--color-primary-400);
  --color-primary-active-dark: var(--color-primary-600);

  --color-secondary-dark: var(--color-secondary-400);
  --color-secondary-hover-dark: var(--color-secondary-300);
  --color-secondary-active-dark: var(--color-secondary-600);

  --color-success-dark: var(--color-success-400);
  --color-warning-dark: var(--color-warning-400);
  --color-error-dark: var(--color-error-400);
  --color-info-dark: var(--color-info-400);

  --color-bg-dark: 17 24 39;
  --color-bg-secondary-dark: 31 41 55;
  --color-border-dark: 55 65 81;

  --color-text-primary-dark: 243 244 246;
  --color-text-secondary-dark: 156 163 175;
  --color-text-muted-dark: 107 114 128;

  --icon-default-dark: 156 163 175;
  --icon-hover-dark: 255 255 255;
  --icon-active-dark: 243 244 246;
  --icon-disabled-dark: 75 85 99;

  /* Canonical aliases mapped to dark */
  --color-primary: var(--color-primary-dark, 59 130 246);
  --color-primary-hover: var(--color-primary-hover-dark, 96 165 250);
  --color-primary-active: var(--color-primary-active-dark, 37 99 235);

  --color-secondary: var(--color-secondary-dark, 148 163 184);
  --color-secondary-hover: var(--color-secondary-hover-dark, 203 213 225);
  --color-secondary-active: var(--color-secondary-active-dark, 71 85 99);

  --color-success: var(--color-success-dark, 74 222 128);
  --color-warning: var(--color-warning-dark, 251 191 36);
  --color-error: var(--color-error-dark, 251 113 133);
  --color-info: var(--color-info-dark, 34 211 238);
  --color-ocean: var(--color-ocean-dark, 14 165 233);
  --color-emerald: var(--color-emerald-dark, 16 185 129);

  --color-bg: var(--color-bg-dark, 17 24 39);
  --color-bg-secondary: var(--color-bg-secondary-dark, 31 41 55);
  --color-border: var(--color-border-dark, 55 65 81);

  --color-text-primary: var(--color-text-primary-dark, 243 244 246);
  --color-text-secondary: var(--color-text-secondary-dark, 156 163 175);
  --color-text-muted: var(--color-text-muted-dark, 107 114 128);

  --icon-default: var(--icon-default-dark, 156 163 175);
  --icon-hover: var(--icon-hover-dark, 255 255 255);
  --icon-active: var(--icon-active-dark, 243 244 246);
  --icon-disabled: var(--icon-disabled-dark, 75 85 99);

  --modal-overlay: 0 0 0;
  --modal-surface: var(--color-bg-secondary);
  --modal-border: var(--color-border);
  --modal-header-bg: var(--color-bg-secondary);
  --modal-header-border: var(--color-border);
  --modal-title-color: var(--color-text-primary);
  --modal-close-color: var(--icon-default);

  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: var(--color-primary-hover);
  --btn-primary-active: var(--color-primary-active);
  --btn-primary-text: var(--color-neutral-0);

  --btn-secondary-bg: var(--color-bg-secondary);
  --btn-secondary-border: var(--color-border);
  --btn-secondary-text: var(--color-text-primary);
  --btn-secondary-hover-bg: var(--color-neutral-50);

  --form-bg: var(--color-bg-secondary);
  --form-text: var(--color-text-primary);
  --form-border: var(--color-border);
  --form-placeholder: var(--color-text-muted);
  --form-ring: var(--color-primary-500);

  --nav-bg: var(--color-bg-secondary);
  --nav-border: var(--color-border);
  --nav-text: var(--color-text-primary);
  --nav-icon: var(--icon-default);
  --nav-hover-bg: var(--color-neutral-700);

  /* Input text fields */
  /* Text color for input fields in dark theme */
  --dark-theme-input-text: var(--color-text-primary);
  /* Background color for input fields in dark theme */
  --dark-theme-input-bg: var(--color-bg-secondary);
  /* Border color for input fields in dark theme */
  --dark-theme-input-border: var(--color-border);
  /* Placeholder text color for input fields in dark theme */
  --dark-theme-input-placeholder: var(--color-text-muted);
  /* Focus ring/border accent for inputs in dark theme */
  --dark-theme-input-focus-color: var(--color-primary-500);
  /* Hover background color for inputs in dark theme */
  --dark-theme-input-hover-bg: var(--color-neutral-700);
  /* Hover border color for inputs in dark theme */
  --dark-theme-input-hover-border: var(--color-border);

  /* Dropdown components */
  /* Dropdown panel background in dark theme */
  --dark-theme-dropdown-bg: var(--color-bg-secondary);
  /* Dropdown text color in dark theme */
  --dark-theme-dropdown-text: var(--color-text-primary);
  /* Dropdown border color in dark theme */
  --dark-theme-dropdown-border: var(--color-border);
  /* Dropdown item hover background in dark theme */
  --dark-theme-dropdown-hover-bg: var(--color-neutral-700);
  /* Dropdown item hover text in dark theme */
  --dark-theme-dropdown-hover-text: var(--color-text-primary);
  /* Dropdown selected item background in dark theme */
  --dark-theme-dropdown-selected-bg: var(--color-primary-600);
  /* Dropdown selected item text in dark theme */
  --dark-theme-dropdown-selected-text: var(--color-neutral-0);
  /* Dropdown shadow in dark theme (use as box-shadow) */
  --dark-theme-dropdown-shadow: 0 10px 24px rgba(0,0,0,0.55);

  /* Other common elements */
  /* Disabled background color in dark theme */
  --dark-theme-disabled-bg: var(--color-neutral-800);
  /* Disabled text color in dark theme */
  --dark-theme-disabled-text: var(--color-neutral-500);
  /* Disabled border color in dark theme */
  --dark-theme-disabled-border: var(--color-neutral-700);
  /* Error background tint in dark theme */
  --dark-theme-error-bg: var(--color-neutral-800);
  /* Error text color in dark theme */
  --dark-theme-error-text: var(--color-error-400);
  /* Error border color in dark theme */
  --dark-theme-error-border: var(--color-error-600);
  /* Warning background tint in dark theme */
  --dark-theme-warning-bg: var(--color-neutral-800);
  /* Warning text color in dark theme */
  --dark-theme-warning-text: var(--color-warning-400);
  /* Warning border color in dark theme */
  --dark-theme-warning-border: var(--color-warning-600);
  /* Default transition duration for dark theme interactions */
  --dark-theme-transition-duration-default: 150ms;
  /* Fast transition duration for dark theme interactions */
  --dark-theme-transition-duration-fast: 100ms;
  /* Slow transition duration for dark theme interactions */
  --dark-theme-transition-duration-slow: 300ms;
  /* Default easing curve for dark theme interactions */
  --dark-theme-transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  /* Opacity used for disabled elements in dark theme */
  --dark-theme-opacity-disabled: 0.55;
  /* Opacity used for overlays in dark theme */
  --dark-theme-opacity-overlay: 0.50;
  /* Opacity used for muted text/elements in dark theme */
  --dark-theme-opacity-muted: 0.75;
  /* Opacity used for hover states in dark theme */
  --dark-theme-opacity-hover: 0.90;

  /* Buttons (Dark Theme)
     Primary action buttons in dark mode. */
  --dark-theme-btn-primary-bg: var(--color-primary-600);
  --dark-theme-btn-primary-text: var(--color-neutral-0);
  --dark-theme-btn-primary-hover-bg: var(--color-primary-700);
  --dark-theme-btn-primary-active-bg: var(--color-primary-800);
  --dark-theme-btn-primary-border: var(--color-primary-600);

  /* Secondary buttons in dark mode. */
  --dark-theme-btn-secondary-bg: var(--color-bg-secondary);
  --dark-theme-btn-secondary-text: var(--color-text-primary);
  --dark-theme-btn-secondary-hover-bg: var(--color-neutral-700);
  --dark-theme-btn-secondary-active-bg: var(--color-neutral-800);
  --dark-theme-btn-secondary-border: var(--color-border);

  /* Status buttons in dark mode. */
  --dark-theme-btn-success-bg: var(--color-success);
  --dark-theme-btn-success-hover-bg: var(--color-success-600);
  --dark-theme-btn-success-active-bg: var(--color-success-700);
  --dark-theme-btn-success-text: var(--color-neutral-0);

  --dark-theme-btn-warning-bg: var(--color-warning);
  --dark-theme-btn-warning-hover-bg: var(--color-warning-600);
  --dark-theme-btn-warning-active-bg: var(--color-warning-700);
  --dark-theme-btn-warning-text: var(--color-neutral-0);

  --dark-theme-btn-error-bg: var(--color-error);
  --dark-theme-btn-error-hover-bg: var(--color-error-600);
  --dark-theme-btn-error-active-bg: var(--color-error-700);
  --dark-theme-btn-error-text: var(--color-neutral-0);

  /* Tables (Dark Theme)
     Basic table styling and interactions. */
  --dark-theme-table-bg: var(--color-bg-secondary);
  --dark-theme-table-text: var(--color-neutral-300);
  --dark-theme-table-border: var(--color-border);
  --dark-theme-table-header-bg: var(--color-neutral-800);
  --dark-theme-table-header-text: var(--color-neutral-200);
  --dark-theme-table-row-bg: var(--color-bg-secondary);
  --dark-theme-table-row-hover-bg: var(--color-neutral-700);

  /* Toast Notifications (Dark Theme)
     Container and type-specific tokens. */
  --dark-theme-toast-bg: var(--color-bg-secondary);
  --dark-theme-toast-text: var(--color-text-primary);
  --dark-theme-toast-border: var(--color-border);
  --dark-theme-toast-shadow: 0 15px 30px rgba(0,0,0,0.60);

  --dark-theme-toast-success-bg: var(--color-success-50);
  --dark-theme-toast-success-text: var(--color-success-800);
  --dark-theme-toast-success-border: var(--color-success-300);

  --dark-theme-toast-warning-bg: var(--color-warning-50);
  --dark-theme-toast-warning-text: var(--color-warning-800);
  --dark-theme-toast-warning-border: var(--color-warning-300);

  --dark-theme-toast-error-bg: var(--color-error-50);
  --dark-theme-toast-error-text: var(--color-error-800);
  --dark-theme-toast-error-border: var(--color-error-300);

  --dark-theme-toast-info-bg: var(--color-primary-50);
  --dark-theme-toast-info-text: var(--color-primary-800);
  --dark-theme-toast-info-border: var(--color-primary-300);
}
/* System preference detection: applies when data-theme is not set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary: var(--color-primary-dark, 59 130 246);
    --color-primary-hover: var(--color-primary-hover-dark, 96 165 250);
    --color-primary-active: var(--color-primary-active-dark, 37 99 235);

    --color-secondary: var(--color-secondary-dark, 148 163 184);
    --color-secondary-hover: var(--color-secondary-hover-dark, 203 213 225);
    --color-secondary-active: var(--color-secondary-active-dark, 71 85 99);

    --color-success: var(--color-success-dark, 74 222 128);
    --color-warning: var(--color-warning-dark, 251 191 36);
    --color-error: var(--color-error-dark, 251 113 133);
    --color-info: var(--color-info-dark, 34 211 238);

    --color-bg: var(--color-bg-dark, 17 24 39);
    --color-bg-secondary: var(--color-bg-secondary-dark, 31 41 55);
    --color-border: var(--color-border-dark, 55 65 81);

    --color-text-primary: var(--color-text-primary-dark, 243 244 246);
    --color-text-secondary: var(--color-text-secondary-dark, 156 163 175);
    --color-text-muted: var(--color-text-muted-dark, 107 114 128);

    --icon-default: var(--icon-default-dark, 156 163 175);
    --icon-hover: var(--icon-hover-dark, 255 255 255);
    --icon-active: var(--icon-active-dark, 243 244 246);
    --icon-disabled: var(--icon-disabled-dark, 75 85 99);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-primary: var(--color-primary-light, 37 99 235);
    --color-primary-hover: var(--color-primary-hover-light, 29 78 216);
    --color-primary-active: var(--color-primary-active-light, 30 64 175);

    --color-secondary: var(--color-secondary-light, 71 85 99);
    --color-secondary-hover: var(--color-secondary-hover-light, 51 65 85);
    --color-secondary-active: var(--color-secondary-active-light, 30 41 59);

    --color-success: var(--color-success-light, 22 163 74);
    --color-warning: var(--color-warning-light, 217 119 6);
    --color-error: var(--color-error-light, 225 29 72);
    --color-info: var(--color-info-light, 8 145 178);

    --color-bg: var(--color-bg-light, 249 250 251);
    --color-bg-secondary: var(--color-bg-secondary-light, 255 255 255);
    --color-border: var(--color-border-light, 229 231 235);

    --color-text-primary: var(--color-text-primary-light, 17 24 39);
    --color-text-secondary: var(--color-text-secondary-light, 75 85 99);
    --color-text-muted: var(--color-text-muted-light, 156 163 175);

    --icon-default: var(--icon-default-light, 107 114 128);
    --icon-hover: var(--icon-hover-light, 55 65 81);
    --icon-active: var(--icon-active-light, 17 24 39);
    --icon-disabled: var(--icon-disabled-light, 209 213 219);
  }
}

/* Fallbacks for browsers without CSS variables */
@supports not (color: var(--fallback-test)) {
  body {
    background-color: #f9fafb;
    color: #111827;
  }
}