:root {
    --color-primary-base: #031E3F;
    --color-primary-50: color-mix(in srgb, var(--color-primary-base) 5%, white);
    --color-primary-100: color-mix(in srgb, var(--color-primary-base) 10%, white);
    --color-primary-200: color-mix(in srgb, var(--color-primary-base) 25%, white);
    --color-primary-300: color-mix(in srgb, var(--color-primary-base) 45%, white);
    --color-primary-400: color-mix(in srgb, var(--color-primary-base) 70%, white);
    --color-primary-500: var(--color-primary-base);
    --color-primary-600: color-mix(in srgb, var(--color-primary-base) 85%, black);
    --color-primary-700: color-mix(in srgb, var(--color-primary-base) 70%, black);
    --color-primary-800: color-mix(in srgb, var(--color-primary-base) 50%, black);
    --color-primary-900: color-mix(in srgb, var(--color-primary-base) 35%, black);
    --color-primary-950: color-mix(in srgb, var(--color-primary-base) 20%, black);
    --color-primary: var(--color-primary-500);

    --color-complementary-base: #031E3F;
    --color-complementary-50: color-mix(in srgb, var(--color-complementary-base) 5%, white);
    --color-complementary-100: color-mix(in srgb, var(--color-complementary-base) 10%, white);
    --color-complementary-200: color-mix(in srgb, var(--color-complementary-base) 25%, white);
    --color-complementary-300: color-mix(in srgb, var(--color-complementary-base) 45%, white);
    --color-complementary-400: color-mix(in srgb, var(--color-complementary-base) 70%, white);
    --color-complementary-500: var(--color-complementary-base);
    --color-complementary-600: color-mix(in srgb, var(--color-complementary-base) 85%, black);
    --color-complementary-700: color-mix(in srgb, var(--color-complementary-base) 70%, black);
    --color-complementary-800: color-mix(in srgb, var(--color-complementary-base) 50%, black);
    --color-complementary-900: color-mix(in srgb, var(--color-complementary-base) 35%, black);
    --color-complementary-950: color-mix(in srgb, var(--color-complementary-base) 20%, black);
    --color-complementary: var(--color-complementary-500);

    --color-accent-base: #461519;
    --color-accent-50: color-mix(in srgb, var(--color-accent-base) 5%, white);
    --color-accent-100: color-mix(in srgb, var(--color-accent-base) 10%, white);
    --color-accent-200: color-mix(in srgb, var(--color-accent-base) 25%, white);
    --color-accent-300: color-mix(in srgb, var(--color-accent-base) 45%, white);
    --color-accent-400: color-mix(in srgb, var(--color-accent-base) 70%, white);
    --color-accent-500: var(--color-accent-base);
    --color-accent-600: color-mix(in srgb, var(--color-accent-base) 85%, black);
    --color-accent-700: color-mix(in srgb, var(--color-accent-base) 70%, black);
    --color-accent-800: color-mix(in srgb, var(--color-accent-base) 50%, black);
    --color-accent-900: color-mix(in srgb, var(--color-accent-base) 35%, black);
    --color-accent-950: color-mix(in srgb, var(--color-accent-base) 20%, black);
    --color-accent: var(--color-accent-500);

  --color-primary: #031E3F;
  --color-secondary: #031E3F;
  --color-accent: #461519;
  --color-accent-light: #461519;
  --color-accent-dark: #F4EFED;
  --color-surface: #031E3F;
  --color-card: #F4EFED;
  --color-primary-strong: #031A36;
  --color-accent-strong: #3C1215;
  --color-surface-strong: #031C3A;
  --color-card-strong: #E0DCDA;
  --color-on-primary: #FFFFFF;
  --color-on-primary-soft: #111827;
  --color-on-primary-muted: #B8BFC7;
  --color-on-accent: #FFFFFF;
  --color-on-accent-light: #FFFFFF;
  --color-on-accent-dark: #111827;
  --color-on-accent-muted: #CBBDBF;
  --color-on-surface: #FFFFFF;
  --color-on-surface-muted: #B8C0C9;
  --color-on-surface-accent: #461519;
  --color-on-card: #111827;
  --color-on-card-muted: #51545E;
  --color-border-surface: #E1E4E8;
  --color-border-card: #D2D7DC;
  --button-primary-bg: #031A36;
  --button-primary-bg-hover: #031730;
  --button-primary-fg: #FFFFFF;
  --button-accent-bg: #461519;
  --button-accent-bg-hover: #3C1215;
  --button-accent-fg: #FFFFFF;
  --button-whatsapp-bg: #25D366;
  --button-whatsapp-bg-hover: #1DA851;
  --button-whatsapp-fg: #FFFFFF;
  --button-surface-bg: #FFFFFF;
  --button-surface-fg: #FFFFFF;
  --button-outline-light-fg: #FFFFFF;
  --button-outline-light-border: rgba(255, 255, 255, 0.5);
  --icon-button-bg: #FFFFFF;
  --icon-button-fg: #031A36;
  --icon-button-hover-bg: #031A36;
  --icon-button-hover-fg: #FFFFFF;
  --font-heading: "Arsenal", Georgia, serif;
  --font-body: "Spline Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Spline Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Arsenal", Georgia, serif;
  --radius-card: 2rem;
  --radius-button: 9999px;
  --shadow-soft: 0 20px 60px rgba(3, 30, 63, 0.16);
  --spacing-density: 1;
}