:root {
  /* Surfaces */
  --color-surface: #f2fbfc;
  --color-surface-dim: #d2dcdd;
  --color-surface-bright: #f2fbfc;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #ecf5f6;
  --color-surface-container: #e6f0f1;
  --color-surface-container-high: #e0eaeb;
  --color-surface-container-highest: #dbe4e5;
  --color-surface-variant: #dbe4e5;

  /* Text */
  --color-on-surface: #141d1e;
  --color-on-surface-variant: #58413e;
  --color-on-background: #141d1e;
  --color-background: #f2fbfc;

  /* Primary (Tower / heritage) */
  --color-primary: #a73229;
  --color-on-primary: #ffffff;
  --color-primary-container: #c84b3e;
  --color-on-primary-container: #fffbff;
  --color-primary-fixed: #ffdad5;
  --color-primary-fixed-dim: #ffb4aa;
  --color-on-primary-fixed: #410001;
  --color-on-primary-fixed-variant: #891d16;
  --color-surface-tint: #aa352b;

  /* Secondary (Nature) */
  --color-secondary: #006d35;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #91f5a8;
  --color-on-secondary-container: #007237;
  --color-secondary-fixed: #94f8ab;
  --color-secondary-fixed-dim: #78db91;
  --color-on-secondary-fixed: #00210c;
  --color-on-secondary-fixed-variant: #005226;

  /* Tertiary (Institutional navy) */
  --color-tertiary: #515b78;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #697492;
  --color-on-tertiary-container: #fefcff;
  --color-tertiary-fixed: #d9e2ff;
  --color-tertiary-fixed-dim: #bbc6e7;
  --color-on-tertiary-fixed: #0f1b34;
  --color-on-tertiary-fixed-variant: #3b4662;

  /* Inverse */
  --color-inverse-surface: #293233;
  --color-inverse-on-surface: #e9f3f3;
  --color-inverse-primary: #ffb4aa;

  /* Outline & borders */
  --color-outline: #8c716d;
  --color-outline-variant: #dfbfbb;
  --color-border-subtle: #e5e7eb;

  /* Error */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Typography */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --text-display-lg: 700 3rem/3.5rem var(--font-display);
  --text-headline-lg: 700 2rem/2.5rem var(--font-display);
  --text-headline-lg-mobile: 700 1.75rem/2.25rem var(--font-display);
  --text-headline-md: 600 1.5rem/2rem var(--font-display);
  --text-body-lg: 400 1.125rem/1.75rem var(--font-body);
  --text-body-md: 400 1rem/1.5rem var(--font-body);
  --text-label-md: 600 0.875rem/1.25rem var(--font-body);

  /* Spacing */
  --space-unit: 8px;
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --section-padding: clamp(3rem, 8vw, 7.5rem);

  /* Radius */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-ambient: 0 10px 30px rgba(31, 42, 68, 0.05);

  /* Focus */
  --focus-ring: 2px solid var(--color-primary);
  --focus-offset: 2px;

  /* Layout */
  --header-height: 72px;
  --utility-bar-height: 40px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
  }
}