:root {
  /* ── Brand palette ───────────────────────────────── */
  --blue-500: #1AAEFC;   /* Primary Blue */
  --blue-600: #0E97E0;   /* hover / pressed */
  --blue-400: #4FC2FD;
  --blue-100: #D6F0FE;
  --blue-50:  #EAF7FF;

  --navy-900: #11294D;   /* Deep Navy */
  --navy-700: #1C3A66;
  --navy-500: #2E4E80;

  --white:    #FFFFFF;   /* Pure White */
  --cloud:    #F6F9FC;   /* Cloud White */
  --steel:    #7A91AA;   /* Steel Gray */
  --steel-200:#C7D3E0;
  --steel-100:#E3EAF2;

  --green-500:#22C55E;   /* Success Green */
  --green-50: #E9FBF0;
  --amber-500:#F5A623;
  --amber-50: #FEF4E2;
  --red-500:  #E5484D;
  --red-50:   #FCECEC;

  /* ── Semantic aliases ────────────────────────────── */
  --bg-page:        var(--cloud);
  --bg-elevated:    var(--white);
  --bg-brand:       var(--blue-500);
  --bg-brand-dark:  var(--navy-900);

  --text-strong:    var(--navy-900);
  --text-body:      #33455F;
  --text-muted:     var(--steel);
  --text-on-brand:  var(--white);
  --text-link:      var(--blue-600);

  --surface-card:   var(--white);
  --border-subtle:  var(--steel-100);
  --border-default: var(--steel-200);
  --border-strong:  var(--steel);

  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-600);

  --success:        var(--green-500);
  --warning:        var(--amber-500);
  --danger:         var(--red-500);
}