/* ============================================================
   tokens.css: WDS Site Framework
   THE ONLY STYLESHEET THAT CHANGES BETWEEN CLIENTS.

   Replace the values. Never rename, add, or remove the
   property names: base.css depends on every one of them.

   Contrast rule: any token used for text on a background
   must clear WCAG 2.1 AA (4.5:1 normal, 3:1 large).
   Verify before ship. Brand colors often fail on white and
   need a separate darkened variant for text use.
   ============================================================ */

:root {

  /* ── Brand ────────────────────────────────────────────── */
  --brand-primary:       #0B2B55;  /* Seahawks navy. Buttons, focus rings, header */
  --brand-primary-dark:  #061B38;  /* Hover and active states */
  --brand-primary-text:  #1E4E8C;  /* Link blue. 8.3:1 on white, 7.4:1 on surface-alt */
  --brand-accent:        #79B4E8;  /* Seahawks sky blue. On navy only (6.4:1); fails as text on white */

  /* ── Neutrals ─────────────────────────────────────────── */
  --brand-ink:           #13213A;  /* Body text */
  --brand-ink-muted:     #4B5870;  /* Secondary text. 7.2:1 on white */
  --brand-surface:       #FFFFFF;  /* Page background */
  --brand-surface-alt:   #EEF2F7;  /* Alternating section background */
  --brand-border:        #7D8799;  /* Form and card borders. 3.6:1 */

  /* ── Feedback ─────────────────────────────────────────── */
  --brand-success:       #1B6B45;
  --brand-error:         #A3242F;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

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

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:  1200px;
  --nav-height: 80px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}