:root {
  /* Base brand palette (sampled from logo) */
  --navy-900: #0d1c49;
  --navy-800: #16264f;
  --navy-700: #22335f;
  --navy-600: #34456f;
  --navy-100: #dfe3ee;
  --navy-50: #eef1f7;
  --red-600: #d40006;
  --red-500: #ff0005;
  --red-50: #ffecec;
  --white: #ffffff;
  --ink-2: #495376;   /* muted navy for secondary text */
  --ink-3: #7c85a3;   /* faint navy for captions/placeholders */
  --line-1: #d7dbe7;  /* borders on light */
  --line-2: rgba(255, 255, 255, 0.16); /* borders on navy */
  --paper: #f7f8fb;   /* page background */

  /* Semantic status */
  --success: #1a7f4e;
  --warning: #b06a00;
  --danger: var(--red-600);

  /* Semantic aliases */
  --text-body: var(--navy-900);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-inverse: var(--white);
  --text-accent: var(--red-500);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-brand: var(--navy-900);
  --surface-brand-raised: var(--navy-800);
  --surface-accent-tint: var(--red-50);
  --surface-navy-tint: var(--navy-50);

  --border-default: var(--line-1);
  --border-on-brand: var(--line-2);
  --border-focus: var(--navy-900);

  --action-primary: var(--red-500);
  --action-primary-hover: var(--red-600);
  --action-secondary: var(--navy-900);
  --action-secondary-hover: var(--navy-700);
}