:root {
  /* ── Base ── */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ── Brand: Navy (primary CTA / active states) ── */
  --navy: #001C64;
  --navy-hover: #001753;
  --navy-pressed: #000E32;
  --navy-focus: rgba(0, 28, 100, 0.2);
  --navy-border: #D6DBE6;
  --navy-surface: #F0F1F6;

  /* ── Brand: Blue (interactive / marketing accent) ── */
  --blue: #2176FF;
  --blue-hover: #1C62D4;
  --blue-pressed: #113B80;
  --blue-surface: #EDF4FF;
  --blue-border: #C4DAFF;
  --blue-focus: rgba(33, 118, 255, 0.2);

  /* ── Brand: Sky (highlights / secondary accent) ── */
  --sky: #33A1FD;
  --sky-hover: #2B86D3;
  --sky-pressed: #1A517F;
  --sky-surface: #EFF7FF;
  --sky-border: #C9E6FE;
  --sky-focus: rgba(51, 161, 253, 0.2);

  /* ── Neutrals (ink scale) ── */
  --ink-100: #111827;   /* headings */
  --ink-90:  #1E2A3B;
  --ink-80:  #27364B;
  --ink-70:  #374151;   /* body text */
  --ink-60:  #64748B;
  --ink-50:  #6B7280;   /* muted body */
  --ink-40:  #9AA0AD;   /* subtle / captions */
  --ink-30:  #C4C9D4;   /* ghost / disabled text */
  --ink-20:  #E5E7EB;   /* borders (Line) */
  --ink-10:  #F9FAFB;   /* Surface */

  --surface-page: #FFFFFF;
  --surface-muted: #F6F8FA;
  --surface-alt: #F3F4F6;
  --border-default: #E5E7EB;

  /* ── Semantic: Success ── */
  --success: #10B981;
  --success-text: #059669;
  --success-surface: #ECFDF5;
  --success-border: #A7F3D0;

  /* ── Semantic: Warning ── */
  --warning: #F59E0B;
  --warning-text: #D97706;
  --warning-surface: #FFFBEB;
  --warning-border: #FDE68A;

  /* ── Semantic: Error ── */
  --error: #EF4444;
  --error-text: #DC2626;
  --error-surface: #FEF2F2;
  --error-border: #FECACA;

  /* ── Semantic: Info (uses Blue) ── */
  --info: #2176FF;
  --info-text: #2176FF;
  --info-surface: #EEF4FF;
  --info-border: #BFDBFE;

  /* ── Semantic aliases ── */
  --text-heading: var(--ink-100);
  --text-body: var(--ink-70);
  --text-muted: var(--ink-50);
  --text-subtle: var(--ink-40);
  --text-on-dark: #FFFFFF;
  --text-link: var(--blue);
  --text-link-hover: var(--blue-hover);

  --surface-card: #FFFFFF;
  --surface-sunken: var(--ink-10);
  --surface-inverse: var(--ink-100);
  --surface-brand: var(--navy);

  --border-subtle: var(--ink-20);
  --border-focus: var(--blue);
  --focus-ring: var(--blue-focus);
}