:root{
  /* ===== Brand core ===== */
  --vsp-navy: #071121;      /* primary brand navy */
  --vsp-white: #ffffff;
  --vsp-grey: #f3f6fa;      /* brand light grey */

  /* ===== Navy scale (derived, harmonious) ===== */
  --navy-950: #050c18;
  --navy-900: #071121;      /* = brand navy */
  --navy-800: #0d1c33;
  --navy-700: #142743;
  --navy-600: #1e3557;
  --navy-500: #2c476e;      /* steel — from logo gradient highlight */
  --navy-400: #4a6289;
  --navy-300: #7488a9;
  --navy-200: #a9b6c9;
  --navy-100: #d3dbe6;

  /* ===== Neutrals / surfaces ===== */
  --grey-50:  #f7f9fc;
  --grey-100: #f3f6fa;      /* = brand grey */
  --grey-200: #e6ecf3;
  --grey-300: #d5dde8;
  --grey-400: #b4c0d0;
  --line: #e6ecf3;
  --line-strong: #d5dde8;

  /* ===== Accent (steel blue — subtle geometric elements) ===== */
  --steel: #2c476e;
  --steel-soft: #eef2f8;

  /* ===== Semantic status (muted, corporate) ===== */
  --success: #1f7a5c;
  --success-soft: #e8f3ee;
  --warning: #9a6b13;
  --warning-soft: #f6efe0;
  --danger: #a5342f;
  --danger-soft: #f6e8e7;

  /* ===== Semantic aliases ===== */
  --bg-page: var(--vsp-white);
  --bg-subtle: var(--grey-100);
  --bg-inverse: var(--vsp-navy);
  --surface-card: var(--vsp-white);
  --surface-raised: var(--vsp-white);

  --text-strong: var(--vsp-navy);
  --text-body: #1e2a3d;
  --text-muted: #5b6b82;
  --text-subtle: #8494a8;
  --text-inverse: var(--vsp-white);
  --text-on-navy-muted: #a9b6c9;

  --border-default: var(--line);
  --border-strong: var(--line-strong);

  --focus-ring: #2c476e;
}