:root {
  /* Brand base */
  --navy: #172033;
  --blue: #3973E6;
  --slate: #667085;
  --ice: #F4F6F8;
  --blue-light: #EAF2FF;
  --white: #FFFFFF;

  /* Derived (same hue family, used sparingly) */
  --navy-90: #232D42;      /* raised surface on navy */
  --navy-80: #2E3A52;      /* secondary ink */
  --blue-ink: #2F63CC;     /* blue for small text / hover — passes 4.5:1 on white */
  --blue-deep: #2554B3;    /* pressed */
  --on-navy: #FFFFFF;
  --on-navy-muted: #AEB8C8; /* 7.6:1 on navy */
  --rule: #DDE2E8;
  --rule-soft: #EBEEF2;
  --rule-on-navy: #33405A;

  /* Semantic aliases */
  --text-primary: var(--navy);
  --text-secondary: var(--slate);
  --text-accent: var(--blue-ink);
  --text-inverse: var(--on-navy);
  --text-inverse-muted: var(--on-navy-muted);
  --surface-page: var(--white);
  --surface-alt: var(--ice);
  --surface-highlight: var(--blue-light);
  --surface-inverse: var(--navy);
  --surface-card: var(--white);
  --border-default: var(--rule);
  --border-strong: var(--navy);
  --accent: var(--blue);
  --focus-ring: var(--blue);
}