:root {
  /* Navy Color Palette (Alex & Tobias, Aug 2026) */
  --color-primary: #102C43;          /* Deep Navy — primary color */
  --color-secondary: #5D7180;        /* Muted Blue — secondary */
  --color-accent: #9D9588;           /* Warm Greige — accents */
  --color-neutral-light: #C9BBA5;    /* Sand Beige — light backgrounds */
  --color-neutral-lighter: #FAF8F3;  /* Warm Ivory — very light */
  
  /* Legacy/Compatibility */
  --text: #102C43;                   /* Same as primary */
  --brand-ring: #FAF8F3;             /* Warm Ivory background */
  --color-muted: #f8f6f3;            /* Light surface */

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial;
  --fs-xxl: 40px;
  --fs-xl: 32px;
  --fs-lg: 22px;
  --fs-base: 16px;

  /* Spacing */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;

  /* Radius */
  --radius-base: 10px;
}

/* Button Styling */
:root {
  --button-bg: var(--color-primary);      /* Navy background */
  --button-color: #ffffff;                /* White text */
  --button-hover-bg: #0a1f2f;             /* Darker navy on hover */
}

/* Link Colors */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
}

/* Accent Elements */
.accent, .highlight {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Background Surfaces */
.surface, .card, .panel {
  background-color: var(--color-neutral-lighter);
}

/* Dividers */
hr, .divider {
  border-color: var(--color-secondary);
  opacity: 0.2;
}