:root {
  /* Support for light and dark mode */
  color-scheme: light dark;

  /* Fonts */
  --font-poppins: 'Poppins', Arial, Helvetica, Verdana, sans-serif;
  --font-secondary: 'Source Sans Pro', Georgia, 'Times New Roman', Times, serif;

  /* Modern breakpoints */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Colours */
  --brand-white: white;
  --brand-black: oklch(0.2 0 0);
  --brand-primary: oklch(51.13% 0.1049 166.54);
  --brand-secondary: oklch(0.73 0.173 59);

  --gray-100: oklch(97.61% 0 0);
  --gray-200: oklch(90.67% 0 0);
  --gray-300: oklch(84.52% 0 0);
  --gray-400: oklch(78.26% 0 0);
  --gray-500: oklch(71.55% 0 0);
  --gray-600: oklch(59.99% 0 0);
  --gray-700: oklch(51.03% 0 0);
  --gray-800: oklch(37.15% 0 0);
  --gray-900: oklch(26.86% 0 0);

  --green-50: oklch(97.5% 0.012 166);
  --green-100: oklch(95.36% 0.0143 180.7);
  --green-200: oklch(88.15% 0.0351 180.78);
  --green-300: oklch(80.95% 0.0554 180.08);
  --green-400: oklch(73.81% 0.0744 178.99);
  --green-500: oklch(66.82% 0.0906 177.41);
  --green-600: oklch(51.13% 0.1049 166.54);
  --green-700: oklch(43.8% 0.0875 168.47);
  --green-800: oklch(36.4% 0.0719 169.64);
  --green-900: oklch(28.67% 0.0542 173.24);

  --orange-50: oklch(0.98 0.018 62);
  --orange-100: oklch(0.96 0.035 62);
  --orange-200: oklch(0.9 0.081 59);
  --orange-300: oklch(0.85 0.128 59);
  --orange-400: oklch(0.8 0.156 59);
  --orange-500: oklch(0.76 0.174 59);
  --orange-600: oklch(0.73 0.173 59);
  --orange-700: oklch(0.65 0.172 56);
  --orange-800: oklch(0.53 0.151 56);
  --orange-900: oklch(0.42 0.128 56);

  --blue-100: oklch(0.9 0.067 240);
  --blue-200: oklch(0.83 0.113 246);
  --blue-300: oklch(0.75 0.155 253);
  --blue-400: oklch(0.68 0.175 256);
  --blue-500: oklch(0.61 0.192 257);
  --blue-600: oklch(0.52 0.159 257);
  --blue-700: oklch(0.41 0.15 262);
  --blue-800: oklch(0.31 0.127 265);
  --blue-900: oklch(0.22 0.103 265);

  --purple-100: oklch(91.37% 0.19 327.27);
  --purple-200: oklch(82.35% 0.36 327.27);
  --purple-300: oklch(70.2% 0.53 327.27);
  --purple-400: oklch(58.82% 0.7 327.27);
  --purple-500: oklch(47.45% 0.87 327.27);
  --purple-600: oklch(40% 0.76 327.27);
  --purple-700: oklch(32.55% 0.65 327.27);
  --purple-800: oklch(25.1% 0.54 327.27);
  --purple-900: oklch(17.65% 0.43 327.27);

  --red-100: oklch(95.36% 0.0143 27.7);
  --red-200: oklch(88.15% 0.0351 27.78);
  --red-300: oklch(80.95% 0.0554 27.08);
  --red-400: oklch(73.81% 0.0744 25.99);
  --red-500: oklch(66.82% 0.0906 24.41);
  --red-600: oklch(51.13% 0.1049 13.54);
  --red-700: oklch(43.8% 0.0875 15.47);
  --red-800: oklch(36.4% 0.0719 16.64);
  --red-900: oklch(28.67% 0.0542 20.24);

  --primary-50: var(--green-50);
  --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-50: var(--orange-50);
  --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);

  /* Button styles for light mode */
  --btn-primary-bg: var(--green-600);
  --btn-primary-text: oklch(94.31% 0 0);
  --btn-primary-hover-bg: var(--green-700);
  --btn-primary-hover-text: white;

  /* Secondary button - white background with green text and border in light mode */
  --btn-secondary-bg: white;
  --btn-secondary-text: var(--green-600);
  --btn-secondary-border: var(--green-600);
  --btn-secondary-hover-bg: var(--green-600);
  --btn-secondary-hover-text: white;
  --btn-secondary-hover-border: var(--green-700);

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

  /* Typography Variables */
  /* H1 */
  --font-size-h1: 40px;
  --line-height-h1: 48px;
  --font-weight-h1: 700;

  /* H2 */
  --font-size-h2: 20px;
  --line-height-h2: 28px;
  --font-weight-h2: 700;

  /* H3 */
  --font-size-h3: 16px;
  --line-height-h3: normal;
  --font-weight-h3: 700;

  /* Body */
  --font-size-body: 16px;
  --line-height-body: 20px;
  --font-weight-body: 400;

  /* Body Large */
  --font-size-body-lg: 20px;
  --line-height-body-lg: 24px;
  --font-weight-body-lg: 400;

  /* Body Small */
  --font-size-body-sm: 12px;
  --line-height-body-sm: 16px;
  --font-weight-body-sm: 400;

  /* Link / Body Link */
  --font-size-link: 16px;
  --line-height-link: 20px;
  --font-weight-link: 600;

  /* Common spacing for elements, should mostly just use spacing to keep things
    consistent, but could use others when needed */
  --spacing-lg: 28px;
  --spacing: 20px;
  --spacing-sm: 12px;

  --padding-lg: 32px;
  --padding: 24px;
  --padding-sm: 16px;

  --box-shadow: 0 0 4px 4px rgba(2, 121, 89, 0.08);
  --input-default: white;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 16px;

  /* Table styling */
  --table-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --table-header-bg: var(--primary-50);
  --table-header-text: var(--gray-700);
  --table-header-border: var(--primary-200);
  --table-border: var(--gray-200);
  --table-cell-bg: white;
  --table-cell-text: var(--gray-800);
  --table-row-hover: var(--primary-50);

  /* Component backgrounds and colors for light mode */
  --header-bg: var(--primary-700);
  --navbar-bg: white;

  /* Menu and dropdown styling - dark green background in both modes */
  --menu-button-bg: white;
  --menu-button-border: var(--gray-300);
  --menu-button-text: var(--gray-700);
  --menu-button-hover-bg: var(--gray-100);
  --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: white;
  --dropdown-border: var(--gray-200);
  --dropdown-text: var(--gray-900);
  --dropdown-item-active-bg: var(--primary-100);
  --dropdown-item-active-text: var(--primary-900);
  --dropdown-check: var(--primary-600);
  --dropdown-check-active: var(--primary-600);
  --listbox-icon: var(--gray-500);

  /* Danger text */
  --danger-text: var(--red-600);
  --danger-text-light: var(--red-500);
  --danger-text-dark: var(--red-400);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Light mode surface colors */
  --surface-primary: white;
  --surface-secondary: var(--gray-100);
  --surface-tertiary: white;
  --surface-elevated: white;
  --surface-overlay: white;

  /* Light mode text colors */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);

  /* Light mode border colors */
  --border-primary: var(--gray-300);
  --border-secondary: var(--gray-200);
  --border-focus: var(--primary-600);

  /* Card and component colors */
  --card-bg: white;
  --card-border: var(--gray-200);
  --button-bg: white;
  --button-border: var(--gray-300);
  --button-text: var(--gray-700);

  --inquiries-bg: white;
  --input-bg: var(--input-default);

  /* Domain grid text colors */
  --domain-name-text: var(--gray-900); /* Darkest for domain names */
  --domain-column-text: var(--gray-700); /* Lighter for other columns */
}

/* Modern dark mode theme handled in variables-dark.css */