:root {
  /* Brand palette (Xavier Catholic Education Trust) */
  --brand-navy: #142146;
  --brand-navy-tile: #2c4896;
  --brand-red: #c4232a;
  --brand-gold: #ebd166;
  --brand-tan: #cfccbc;
  --brand-mauve: #953d76;

  /* Contrast-paired surfaces: every colored surface uses -bg with its matching -fg */
  --surface-navy-bg: var(--brand-navy-tile);
  --surface-navy-fg: #fff;
  --surface-red-bg: var(--brand-red);
  --surface-red-fg: #fff;
  --surface-gold-bg: var(--brand-gold);
  --surface-gold-fg: var(--brand-navy);
  --surface-tan-bg: var(--brand-tan);
  --surface-tan-fg: var(--brand-navy);
  --surface-mauve-bg: var(--brand-mauve);
  --surface-mauve-fg: #fff;

  /* Traffic Lights: literal stop/caution/go, deliberately decoupled from brand */
  --traffic-red: #c0392b;
  --traffic-red-dark: #922920;
  --traffic-yellow: #d4a72c;
  --traffic-yellow-dark: #7a5e13;
  --traffic-green: #4a9e5c;
  --traffic-green-dark: #357344;

  --color-bg: var(--brand-navy);
  --color-bg-elevated: #1c2e5f;
  --color-text: #f4f6fb;
  --color-text-dim: #b7c0d6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --topbar-height: 64px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}