:root {
  /* ========================================
     NEW SEMANTIC COLOR SYSTEM
     ======================================== */
  /* Text colors */
  --color-text: #565f54;
  --color-text-light: #ffffff;
  --color-text-dark: color-mix(in srgb, #565f54 80%, black);

  /* Background colors */
  --color-background: #ffffff;
  --color-background-light: color-mix(in srgb, #ffffff 95%, #565f54);
  --color-background-dark: color-mix(in srgb, #ffffff 30%, #565f54);

  /* Primary brand color */
  --color-primary: #E9CBCB;
  --color-primary-light: color-mix(in srgb, #E9CBCB 50%, white);
  --color-primary-lighter: color-mix(in srgb, #E9CBCB 30%, white);
  --color-primary-dark: color-mix(in srgb, #E9CBCB 80%, black);
  --color-primary-darker: color-mix(in srgb, #E9CBCB 50%, black);

  /* Secondary brand color */
  --color-secondary: #a8bba5;
  --color-secondary-light: color-mix(in srgb, #a8bba5 50%, white);
  --color-secondary-lighter: color-mix(in srgb, #a8bba5 30%, white);
  --color-secondary-dark: color-mix(in srgb, #a8bba5 80%, black);
  --color-secondary-darker: color-mix(in srgb, #a8bba5 50%, black);

  /* Accent color */
  --color-accent: #e7d2b0;
  --color-accent-light: color-mix(in srgb, #e7d2b0 50%, white);
  --color-accent-lighter: color-mix(in srgb, #e7d2b0 30%, white);
  --color-accent-dark: color-mix(in srgb, #e7d2b0 80%, black);
  --color-accent-darker: color-mix(in srgb, #e7d2b0 50%, black);

  /* ========================================
     LEGACY COLOR SYSTEM (to be refactored)
     ======================================== */
  --color-primary-800: #E1CBD8;
  --color-secondary-800: #C0777C;
  --color-tertiary-800: #e7d2b0;
  --color-quaternary-800: #a8bba5;

  /* LEGACY: Light shades using mix with white */
  --color-primary-200: color-mix(in srgb, var(--color-primary-800) 90%, white);
  --color-primary-200: color-mix(in srgb, var(--color-primary-800) 80%, white);
  --color-primary-300: color-mix(in srgb, var(--color-primary-800) 60%, white);
  --color-primary-400: color-mix(in srgb, var(--color-primary-800) 40%, white);
  --color-primary-500: color-mix(in srgb, var(--color-primary-800) 30%, white);
  --color-primary-600: color-mix(in srgb, var(--color-primary-800) 20%, white);
  --color-primary-700: color-mix(in srgb, var(--color-primary-800) 10%, white);
  --color-secondary-100: color-mix(in srgb, var(--color-secondary-800) 90%, white);
  --color-secondary-200: color-mix(in srgb, var(--color-secondary-800) 80%, white);
  --color-secondary-300: color-mix(in srgb, var(--color-secondary-800) 60%, white);
  --color-secondary-400: color-mix(in srgb, var(--color-secondary-800) 40%, white);
  --color-secondary-500: color-mix(in srgb, var(--color-secondary-800) 30%, white);
  --color-secondary-600: color-mix(in srgb, var(--color-secondary-800) 20%, white);
  --color-secondary-700: color-mix(in srgb, var(--color-secondary-800) 10%, white);

  /* LEGACY: Dark shades using mix with black */
  --color-dark-secondary-100: color-mix(in srgb, var(--color-secondary-800) 90%, black);
  --color-dark-secondary-200: color-mix(in srgb, var(--color-secondary-800) 80%, black);
  --color-dark-secondary-300: color-mix(in srgb, var(--color-secondary-800) 70%, black);
  --color-dark-secondary-400: color-mix(in srgb, var(--color-secondary-800) 60%, black);
  --color-dark-secondary-500: color-mix(in srgb, var(--color-secondary-800) 50%, black);
  --color-dark-secondary-600: color-mix(in srgb, var(--color-secondary-800) 40%, black);
  --color-dark-secondary-700: color-mix(in srgb, var(--color-secondary-800) 30%, black);
  --color-dark-secondary-800: color-mix(in srgb, var(--color-secondary-800) 20%, black);
  --color-dark-secondary-900: color-mix(in srgb, var(--color-secondary-800) 10%, black);
  --color-dark-primary-100: color-mix(in srgb, var(--color-primary-800) 90%, black);
  --color-dark-primary-200: color-mix(in srgb, var(--color-primary-800) 80%, black);
  --color-dark-primary-300: color-mix(in srgb, var(--color-primary-800) 70%, black);
  --color-dark-primary-400: color-mix(in srgb, var(--color-primary-800) 60%, black);
  --color-dark-primary-500: color-mix(in srgb, var(--color-primary-800) 50%, black);
  --color-dark-primary-600: color-mix(in srgb, var(--color-primary-800) 40%, black);
  --color-dark-primary-700: color-mix(in srgb, var(--color-primary-800) 30%, black);
  --color-dark-primary-800: color-mix(in srgb, var(--color-primary-800) 20%, black);
  --color-dark-primary-900: color-mix(in srgb, var(--color-primary-800) 10%, black);

  /* LEGACY: Tertiary light shades */
  --color-tertiary-200: color-mix(in srgb, var(--color-tertiary-800) 90%, white);
  --color-tertiary-300: color-mix(in srgb, var(--color-tertiary-800) 80%, white);
  --color-tertiary-400: color-mix(in srgb, var(--color-tertiary-800) 70%, white);
  --color-tertiary-500: color-mix(in srgb, var(--color-tertiary-800) 60%, white);
  --color-tertiary-600: color-mix(in srgb, var(--color-tertiary-800) 50%, white);
  --color-tertiary-700: color-mix(in srgb, var(--color-tertiary-800) 40%, white);

  /* LEGACY: Quaternary light shades */
  --color-quaternary-200: color-mix(in srgb, var(--color-secondary-800) 90%, white);
  --color-quaternary-300: color-mix(in srgb, var(--color-quaternary-800) 80%, white);
  --color-quaternary-400: color-mix(in srgb, var(--color-quaternary-800) 70%, white);
  --color-quaternary-500: color-mix(in srgb, var(--color-quaternary-800) 60%, white);
  --color-quaternary-600: color-mix(in srgb, var(--color-quaternary-800) 50%, white);
  --color-quaternary-700: color-mix(in srgb, var(--color-quaternary-800) 40%, white);

  /* LEGACY: Quaternary dark shades */
  --color-dark-quaternary-100: color-mix(in srgb, var(--color-quaternary-800) 90%, black);
  --color-dark-quaternary-200: color-mix(in srgb, var(--color-quaternary-800) 80%, black);
  --color-dark-quaternary-300: color-mix(in srgb, var(--color-quaternary-800) 70%, black);
  --color-dark-quaternary-400: color-mix(in srgb, var(--color-quaternary-800) 60%, black);
  --color-dark-quaternary-500: color-mix(in srgb, var(--color-quaternary-800) 50%, black);
  --color-dark-quaternary-600: color-mix(in srgb, var(--color-quaternary-800) 40%, black);
  --color-dark-quaternary-700: color-mix(in srgb, var(--color-quaternary-800) 30%, black);
  --color-dark-quaternary-800: color-mix(in srgb, var(--color-quaternary-800) 20%, black);
  --color-dark-quaternary-900: color-mix(in srgb, var(--color-quaternary-800) 10%, black);

  /* LEGACY: Tertiary dark shades */
  --color-dark-tertiary-100: color-mix(in srgb, var(--color-tertiary-800) 90%, black);
  --color-dark-tertiary-200: color-mix(in srgb, var(--color-tertiary-800) 80%, black);
  --color-dark-tertiary-300: color-mix(in srgb, var(--color-tertiary-800) 70%, black);
  --color-dark-tertiary-400: color-mix(in srgb, var(--color-tertiary-800) 60%, black);
  --color-dark-tertiary-500: color-mix(in srgb, var(--color-tertiary-800) 50%, black);
  --color-dark-tertiary-600: color-mix(in srgb, var(--color-tertiary-800) 40%, black);
  --color-dark-tertiary-700: color-mix(in srgb, var(--color-tertiary-800) 30%, black);
  --color-dark-tertiary-800: color-mix(in srgb, var(--color-tertiary-800) 20%, black);
  --color-dark-tertiary-900: color-mix(in srgb, var(--color-tertiary-800) 10%, black);

  --font-title: 'Magnalia', 'serif';

  /* Font sizes - Magnalia renders smaller, so we increase the sizes */
  --font-size-base: 18px;
  --font-size-h1: 9rem;
  --font-size-h2: 7rem;
  --font-size-h3: 5rem;
  --font-size-h4: 4rem;
  --font-size-h5: 3rem;
  --font-size-h6: 2rem;
}

h1 {
  font-family: var(--font-title);
  font-size: calc(var(--font-size-h1) * 0.6);
}

@media (min-width: 640px) {
  h1 {
    font-size: var(--font-size-h1);
  }
}

h2 {
  font-family: var(--font-title);
  font-size: var(--font-size-h2);
}

h3 {
  font-family: var(--font-title);
  font-size: var(--font-size-h3);
}

h4 {
  font-family: var(--font-title);
  font-size: var(--font-size-h4);
}

h5 {
  font-family: var(--font-title);
  font-size: var(--font-size-h5);
}

h6 {
  font-family: var(--font-title);
  font-size: var(--font-size-h6);
}