:root{
  /* Brand core */
  --navy: #263B66;         /* header navy */
  --navy-2: #2B4575;       /* slightly lighter */
  --accent: #D6985E;       /* OCC orange */
  --accent-2:#E7B17A;

  /* Page background (light, complements header) */
  --page-bg: #EEF3F9;      /* mist */
  --page-bg-2:#F7FAFD;     /* near-white */

  /* Text on light background */
  --text: #0B1220;
  --muted: rgba(11,18,32,.66);
  --faint: rgba(11,18,32,.46);

  /* Surfaces on light background */
  --surface: rgba(255,255,255,.82);
  --surface-2: rgba(255,255,255,.92);
  --border: rgba(11,18,32,.12);

  /* Shadows + radius */
  --shadow: 0 16px 40px rgba(11,18,32,.12);
  --shadow-soft: 0 10px 26px rgba(11,18,32,.10);
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;

  /* Layout */
  --container-max: 1560px;
  --gutter: clamp(18px, 4vw, 56px);

  /* Spacing */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}