/* Design tokens: colors, typography, spacing, radii, breakpoints */
:root{
  /* Palette (8 colors) - mapped to current site colors to avoid visual changes */
  --color-primary-900: #263632; /* used in table header */
  --color-primary-700: #2a3d35; /* primary button/dark green */
  --color-primary-500: #3b6b57; /* lighter primary (safe choice) */
  /* Additional named colors to match current site palette (preserve visuals) */
  --color-header-start: #b7bbb5; /* header gradient start */
  --color-header-end: #467060;   /* header gradient end */
  --color-cta: #2a3d35; /* cta buttons */
  --color-cta-dark: #181f1c; /* secondary button / dark */
  --color-table-head: #263632; /* table header */
  --color-neutral-100: #f9f9f9;
  --color-neutral-200: #ecefe8;
  --color-neutral-300: #b7bbb5; /* used in header gradient */
  --color-neutral-500: #ccc; /* borders */
  --color-neutral-900: #181f1c; /* dark neutral */
  --color-white: #ffffff;
  --color-bg: #ecf0ea; /* body background */
  --color-text: #333333;
  --color-footer-bg: rgb(190, 192, 190);

  /* Feedback colors */
  --color-success: #28a745;
  --color-danger: #e74c3c;
  --color-info: #66e1ea;

  /* Typography (5 sizes) */
  --fs-xxl: 3.5rem; /* titles */
  --fs-xl: 2.25rem;
  --fs-lg: 1.5rem;
  --fs-md: 1rem;
  --fs-sm: 0.875rem;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Breakpoints (5) */
  --bp-xs: 360px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}

/* Small helpers using tokens */
.container{ max-width: 1200px; margin: 0 auto; padding: 0 var(--space-3); }
.text-muted{ color: var(--color-neutral-500); }
.bg-default{ background: var(--color-bg); }

/* Accessibility focus outline */
:focus{ outline: 3px solid rgba(42,127,115,0.14); outline-offset: 2px; }