:root {
  /* TBS brand palette (from Figma / Brand Guidelines) */
  --color-primary: #00313C;
  --color-primary-dark: #001a21;
  --color-brand-light: #8DB9CA;
  --color-accent: #8DB9CA;
  --color-accent-light: #a8cad8;
  --color-surface: #ffffff;
  --color-page-bg: #FAFAFA;
  --color-surface-alt: #f5f3f0;
  --color-surface-card: #e6eff1;
  --color-surface-awards: #DDDADA;
  --color-surface-warm: #ebe6df;
  --color-text: #2c2c2c;
  --color-text-muted: #6b6b6b;
  --color-text-inverse: #ffffff;
  --color-border: #d9d4cc;
  --color-overlay: rgba(0, 49, 60, 0.55);

  /* Typography — Chianti BT from assets/fonts (brand font) */
  --font-family: 'Chianti BT', Georgia, 'Times New Roman', serif;
  --font-sans: var(--font-family);
  --font-serif: var(--font-family);

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout — synced to .site-header via main.js; fallback for first paint */
  --container-max: 1320px;
  --container-narrow: 900px;
  --header-height: 100px;

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --transition: 0.3s ease;
  --radius-sm: 2px;
  --radius-md: 4px;
}