/* Modern Dark Mode Theme - Consolidated selectors following best practices */
[data-theme='dark'] {
  /* Modern dark theme with proper contrast ratios */
  --surface-primary: oklch(10% 0.002 240); /* Main app background */
  --surface-secondary: oklch(15% 0.004 240); /* Slightly elevated surfaces */
  --surface-tertiary: oklch(20% 0.006 240); /* Card backgrounds */
  --surface-elevated: oklch(30% 0.008 240); /* Elevated components */
  --surface-overlay: oklch(25% 0.01 240); /* Modal/overlay backgrounds */

  /* High contrast text colors */
  --text-primary: oklch(95% 0.002 240);
  --text-secondary: oklch(78% 0.004 240);
  --text-tertiary: oklch(62% 0.006 240);
  --text-disabled: oklch(46% 0.008 240);

  /* Subtle, high-contrast borders */
  --border-primary: oklch(25% 0.008 240);
  --border-secondary: oklch(18% 0.006 240);
  --border-focus: var(--primary-500);

  /* Grayscale mapping */
  --gray-100: var(--surface-primary);
  --gray-200: var(--surface-secondary);
  --gray-300: var(--surface-tertiary);
  --gray-400: var(--border-primary);
  --gray-500: var(--text-disabled);
  --gray-600: var(--text-tertiary);
  --gray-700: var(--text-secondary);
  --gray-800: var(--text-primary);
  --gray-900: oklch(98% 0.001 240);

  /* Brand colors - maintain accessibility */
  --green-100: oklch(12% 0.02 166);
  --green-200: oklch(16% 0.03 166);
  --green-300: oklch(22% 0.04 166);
  --green-400: oklch(32% 0.06 166);
  --green-500: oklch(45% 0.08 166);
  --green-600: oklch(58% 0.09 166); /* Primary brand color - accessible */
  --green-700: oklch(68% 0.085 166);
  --green-800: oklch(78% 0.07 166);
  --green-900: oklch(88% 0.05 166);

  /* Secondary colors */
  --orange-100: oklch(12% 0.02 59);
  --orange-200: oklch(16% 0.03 59);
  --orange-300: oklch(22% 0.04 59);
  --orange-400: oklch(32% 0.06 59);
  --orange-500: oklch(45% 0.08 59);
  --orange-600: oklch(68% 0.12 59);
  --orange-700: oklch(78% 0.11 59);
  --orange-800: oklch(88% 0.08 59);
  --orange-900: oklch(95% 0.05 59);

  /* Error colors */
  --red-100: oklch(12% 0.02 25);
  --red-200: oklch(16% 0.03 25);
  --red-300: oklch(22% 0.04 25);
  --red-400: oklch(32% 0.06 25);
  --red-500: oklch(45% 0.08 25);
  --red-600: oklch(65% 0.15 25);
  --red-700: oklch(75% 0.13 25);
  --red-800: oklch(85% 0.1 25);
  --red-900: oklch(95% 0.07 25);

  /* Info colors */
  --blue-100: oklch(12% 0.02 240);
  --blue-200: oklch(16% 0.03 240);
  --blue-300: oklch(22% 0.04 240);
  --blue-400: oklch(32% 0.06 240);
  --blue-500: oklch(45% 0.08 240);
  --blue-600: oklch(65% 0.12 240);
  --blue-700: oklch(75% 0.1 240);
  --blue-800: oklch(85% 0.08 240);
  --blue-900: oklch(95% 0.05 240);

  /* Warning colors */
  --purple-100: oklch(12% 0.02 320);
  --purple-200: oklch(16% 0.03 320);
  --purple-300: oklch(22% 0.04 320);
  --purple-400: oklch(32% 0.06 320);
  --purple-500: oklch(45% 0.08 320);
  --purple-600: oklch(65% 0.12 320);
  --purple-700: oklch(75% 0.1 320);
  --purple-800: oklch(85% 0.08 320);
  --purple-900: oklch(95% 0.05 320);

  /* Primary/secondary mappings */
  --primary-100: var(--green-100);
  --primary-200: var(--green-200);
  --primary-300: var(--green-300);
  --primary-400: var(--green-400);
  --primary-500: var(--green-500);
  --primary-600: var(--green-600);
  --primary-700: var(--green-700);
  --primary-800: var(--green-800);
  --primary-900: var(--green-900);

  --secondary-100: var(--orange-100);
  --secondary-200: var(--orange-200);
  --secondary-300: var(--orange-300);
  --secondary-400: var(--orange-400);
  --secondary-500: var(--orange-500);
  --secondary-600: var(--orange-600);
  --secondary-700: var(--orange-700);
  --secondary-800: var(--orange-800);
  --secondary-900: var(--orange-900);

  /* Modern button styling with proper contrast */
  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: oklch(95% 0.002 240); /* Near white, high contrast */
  --btn-primary-hover-bg: var(--primary-700);
  --btn-primary-hover-text: oklch(98% 0.001 240);

  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--primary-600);
  --btn-secondary-border: var(--primary-600);
  --btn-secondary-hover-bg: var(--primary-100);
  --btn-secondary-hover-text: var(--primary-700);
  --btn-secondary-hover-border: var(--primary-700);

  --btn-tertiary-bg: transparent;
  --btn-tertiary-text: var(--orange-600);
  --btn-tertiary-border: var(--orange-600);
  --btn-tertiary-hover-bg: var(--orange-100);
  --btn-tertiary-hover-text: var(--orange-700);
  --btn-tertiary-hover-border: var(--orange-700);

  /* Dark mode optimized shadows */
  --box-shadow: 0 4px 16px oklch(4% 0.001 240 / 0.4);
  --shadow-sm: 0 1px 3px oklch(4% 0.001 240 / 0.2);
  --shadow-md: 0 4px 8px oklch(4% 0.001 240 / 0.3), 0 2px 4px oklch(4% 0.001 240 / 0.15);
  --shadow-lg: 0 8px 20px oklch(4% 0.001 240 / 0.4), 0 4px 8px oklch(4% 0.001 240 / 0.2);

  /* Component styling */
  --table-shadow: var(--shadow-md);
  --table-header-bg: var(--surface-elevated);
  --table-header-text: var(--text-primary);
  --table-header-border: var(--border-primary);
  --table-border: var(--border-secondary);
  --table-cell-bg: var(--surface-tertiary);
  --table-cell-text: var(--text-primary);
  --table-row-hover: var(--surface-elevated);

  /* Input styling */
  --input-default: var(--surface-tertiary);

  /* Card and component colors */
  --card-bg: var(--surface-tertiary);
  --card-border: var(--border-secondary);
  --button-bg: var(--surface-elevated);
  --button-border: var(--border-primary);
  --button-text: var(--text-primary);

  /* Specific component backgrounds */
  --inquiries-bg: var(--surface-secondary);

  /* Domain grid text colors */
  --domain-name-text: oklch(92% 0.003 240); /* High contrast for domain names */
  --domain-column-text: oklch(78% 0.004 240); /* Marginally lighter for other columns */

  /* Header hierarchy - header darker, navbar lighter */
  --header-bg: var(--primary-500); /* Darker header */
  --header-text: oklch(95% 0.002 240);
  --header-toggle-hover: oklch(85% 0.004 240);

  --navbar-bg: var(--surface-elevated); /* Lighter navbar */
  --navbar-border: var(--border-primary);
  --navbar-text: var(--text-secondary);
  --navbar-link-hover: var(--primary-600);
  --navbar-active-text: var(--primary-600);
  --navbar-active-indicator: var(--primary-600);
  --navbar-shadow: var(--shadow-sm);

  /* Menu and dropdown styling - dark green background in both modes */
  --menu-button-bg: var(--surface-elevated);
  --menu-button-border: var(--border-primary);
  --menu-button-text: var(--text-primary);
  --menu-button-hover-bg: var(--surface-overlay);
  --menu-bg: var(--primary-600); /* Dark green background */
  --menu-border: var(--primary-700);
  --menu-item-text: oklch(95% 0.002 240); /* Light text on dark green */
  --menu-item-active-bg: oklch(0% 0 0 / 0.15); /* Semi-transparent overlay */
  --menu-item-active-text: oklch(98% 0.001 240); /* Brighter text when active */
  --menu-danger-text: var(--red-300); /* Lighter red for dark background */
  --menu-danger-icon: var(--red-300);
  --menu-danger-active-bg: oklch(0% 0 0 / 0.15);
  --menu-danger-active-text: var(--red-200);

  /* Dropdown styling */
  --dropdown-bg: var(--surface-overlay);
  --dropdown-border: var(--border-primary);
  --dropdown-text: var(--text-primary);
  --dropdown-item-active-bg: var(--primary-100);
  --dropdown-item-active-text: var(--primary-700);
  --dropdown-check: var(--primary-600);
  --dropdown-check-active: var(--primary-600);
  --listbox-icon: var(--text-tertiary);

  /* Status colors with proper contrast */
  --danger-text: var(--red-600);
  --danger-text-light: var(--red-500);
  --danger-text-dark: var(--red-700);
}