:root {
  /* Base palette */
  --navy: #16203a;        /* primary brand color — wordmark, mark, ink */
  --slate: #6b7385;       /* secondary text, tagline */
  --paper: #ffffff;       /* light surfaces */
  --mist: #eceef1;        /* app / stage background */
  --hairline: #e4e7ec;    /* dividers, borders */
  --muted: #8990a0;       /* labels, captions, meta */

  /* Navy shades (derived, harmonious) */
  --navy-hover: #1f2b4a;  /* interactive hover on navy surfaces */
  --navy-press: #0f1729;  /* pressed state */

  /* Semantic aliases */
  --text-strong: var(--navy);
  --text-body: var(--navy);
  --text-secondary: var(--slate);
  --text-muted: var(--muted);
  --text-on-navy: var(--paper);
  --text-on-navy-soft: rgba(255, 255, 255, 0.62);

  --surface-page: var(--mist);
  --surface-card: var(--paper);
  --surface-inverse: var(--navy);

  --border-hairline: var(--hairline);

  --accent: var(--navy);
  --accent-contrast: var(--paper);
}