:root {
  /* Color - Primary */
  --color-primary-light-base: rgb(52, 42, 86);
  --color-primary-dark-base: rgb(36, 42, 86);
  --color-primary-secondary-base: rgb(52, 50, 166);
  --color-primary-complementary-base: rgb(255, 250, 222);

  /* Color - Accent */
  --color-accent-1: rgb(150, 138, 182);
  --color-accent-2: rgb(150, 138, 182);

  /* Color - Background */
  --color-background-light: rgb(252, 247, 255);
  --color-background-dark: rgb(36, 42, 86);
  --color-background-supplementary: rgb(255, 255, 255);

  /* Color - Text */
  --color-text-primary: var(--color-primary-dark-base);
  --color-text-on-light: var(--color-primary-dark-base);
  --color-text-on-dark: rgb(255, 255, 255);
  --color-text-title: rgb(255, 250, 222);

  /* Color - Button */
  --color-button-background: var(--color-primary-secondary-base);
  --color-button-text: rgb(255, 255, 255);
  --color-button-hover: var(--color-primary-dark-base);

  /* Typography - Font Family */
  --typography-font-family-primary: "Lato", sans-serif;
  --typography-font-family-secondary: "Inter", system-ui, sans-serif;
  --typography-font-family-tertiary: "Open Sans", sans-serif;

  /* Typography - Font Size */
  --typography-font-size-xs: 0.8125rem; /* 13px */
  --typography-font-size-sm: 1rem; /* 16px */
  --typography-font-size-md: 1.1875rem; /* 19px */
  --typography-font-size-lg: 1.25rem; /* 20px */
  --typography-font-size-xl: 1.5rem; /* 24px */
  --typography-font-size-2xl: 2rem; /* 32px */
  --typography-font-size-3xl: 3.5625rem; /* 57px */

  /* Typography - Font Weight */
  --typography-font-weight-regular: 400;
  --typography-font-weight-bold: 700;
  --typography-font-weight-black: 900;

  /* Typography - Line Height */
  --typography-line-height-tight: 19px; /* 16px text */
  --typography-line-height-normal: 24px; /* 20px text */
  --typography-line-height-relaxed: 29px; /* 24px text */
  --typography-line-height-heading: 38px; /* 32px text */
  --typography-line-height-hero: 68px; /* 57px text */
  --typography-line-height-percentage-140: 1.4; /* 140% - 22px for 16px text */
  --typography-line-height-percentage-154: 1.541; /* 154.1% - 25px for 16px text */

  /* Typography - Letter Spacing */
  --typography-letter-spacing-normal: 0;

  /* Typography - Font Style */
  --typography-font-style-normal: normal;
  --typography-font-style-italic: italic;

  /* Spacing */
  --spacing-xs: 0.625rem; /* 10px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.4375rem; /* 23px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 2.875rem; /* 46px */
  --spacing-3xl: 4rem; /* 64px */
  --spacing-4xl: 5.75rem; /* 92px */
  --spacing-5xl: 8.625rem; /* 138px */
  --spacing-container-padding: 16.25rem; /* 260px */

  /* Sizing */
  --sizing-button-height-sm: 2.6875rem; /* 43px */
  --sizing-button-height-md: 3rem; /* 48px */
  --sizing-button-height-lg: 3.5rem; /* 56px */
  --sizing-button-width-standard: 7.4375rem; /* 119px */
  --sizing-button-width-min: 7.5rem; /* 120px */
  --sizing-button-square: 4.75rem; /* 76px */
  --sizing-container-max-width: 87.75rem; /* 1404px */
  --sizing-color-swatch: 17.625rem; /* 282px */

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 0.25rem; /* 4px */
  --border-radius-md: 1.25rem; /* 20px */
  --border-radius-lg: 2.3125rem; /* 37px */
  --border-radius-full: 6.25rem; /* 100px */

  /* Border Width */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* Shadow */
  --shadow-card: 2px 5px 4px rgba(0, 0, 0, 0.25);
  --shadow-card-drop: drop-shadow(2px 5px 4px rgba(0, 0, 0, 0.25));

  /* Opacity */
  --opacity-6: 0.06;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-52: 0.52;
  --opacity-67: 0.666667;
  --opacity-100: 1;

  /* Color - Logo */
  --color-logo-gray: rgb(88, 89, 91); /* #58595B */
  --color-logo-dark-gray: rgb(65, 64, 66); /* #414042 */

  /* Motion - Duration */
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 250ms;
  --motion-duration-slow: 400ms;

  /* Motion - Easing */
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Z-Index */
  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary-base: var(--color-primary-dark-base);
    --color-background-base: var(--color-background-dark);
    --color-text-primary: var(--color-text-on-dark);
  }
}

/* Alternative: Data attribute approach for theme switching */
[data-theme="dark"] {
  --color-primary-base: var(--color-primary-dark-base);
  --color-background-base: var(--color-background-dark);
  --color-text-primary: var(--color-text-on-dark);
}