/* global-b: Dark Blue theme tokens (brand palette + semantic variables)
   Primary: brand-dark-blue (#005387)
   This file provides CSS variables used across the site. Keep names stable so
   components can rely on them (e.g. --primary, --accent, --bg, --surface, --text).
*/
:root{
  /* Brand palette */
  --brand-dark-blue: #005387; /* primary */
  --brand-medium-blue: #0e7bbb;
  --brand-turquoise: #2ac3ea;
  --brand-pale-blue: #c8e9ef;
  --brand-pavingstone: #f2f1f0;
  --brand-white: #ffffff;


  /* Semantic tokens */
  --primary: var(--brand-dark-blue);
  --on-primary: #ffffff;
  --accent: var(--brand-turquoise);
  --on-accent: #012f38; /* dark text that reads on turquoise */

  --bg: var(--brand-pavingstone); /* this is the background outside of the page*/
  --surface: #041627; /* surfaces/cards*/
  --surface-2: var(--brand-white); /* alternate surface, this is the background in the page */
  --text: #000000; /* primary body text on dark */
  --muted: #98a7b8; /* subdued text */
  --border: rgba(255,255,255,0.06);

  /* Layout / shape tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows (subtle on dark backgrounds) */
  --shadow-sm: 0 4px 10px rgba(2,16,30,0.6);
  --shadow-md: 0 10px 30px rgba(2,16,30,0.7);
}

/* Basic helpers for legacy layout parts that expect header/main/footer rules */
header { background-color: var(--primary) !important; color: var(--on-primary) !important; }
main { background-color: var(--surface-2) !important; color: var(--text); }
footer { background-color: var(--primary) !important; color: var(--on-primary) !important; }