/* DeltaBlue — Color tokens
 * Extracted from the brand slide theme. Primary blue #2261F0, ink #081122,
 * deep navy #102D66, off-white field #FCFCFD, blue tint #EBF2FF.
 */
:root {
  /* ---- Brand blue scale (anchored on #2261F0) ---- */
  --blue-50:  #EBF2FF;
  --blue-100: #D6E3FE;
  --blue-200: #ADC6FC;
  --blue-300: #7BA1F8;
  --blue-400: #4A7DF4;
  --blue-500: #2261F0;  /* PRIMARY */
  --blue-600: #1A4FCB;  /* hover */
  --blue-700: #143FA3;  /* pressed */
  --blue-800: #102D66;  /* deep navy-blue */
  --blue-900: #081122;  /* ink */

  /* ---- Neutral scale (cool, navy-tinted) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFD;  /* page field */
  --neutral-50:  #F5F7FA;
  --neutral-100: #EBEDF2;  /* hairlines / subtle fills */
  --neutral-200: #DCE0E8;
  --neutral-300: #C2C8D4;
  --neutral-400: #9AA2B4;
  --neutral-500: #6B7488;
  --neutral-600: #4A5267;
  --neutral-700: #2E3650;
  --neutral-800: #182238;
  --neutral-900: #081122;  /* ink (== blue-900) */

  /* ---- Semantic status ---- */
  --green-50:  #E6F6EE;  --green-500: #1F8A5B;  --green-600: #167349;
  --amber-50:  #FBF1DC;  --amber-500: #D9930A;  --amber-600: #B5790A;
  --red-50:    #FCEAEA;  --red-500:   #DC3535;  --red-600:   #B82A2A;

  /* ============ SEMANTIC ALIASES ============ */
  /* Brand */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-active:     var(--blue-700);
  --brand-ink:        var(--blue-800);   /* deep navy used in headlines/logo */
  --brand-tint:       var(--blue-50);    /* light blue wash */

  /* Surfaces */
  --surface-page:     var(--neutral-25);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-50);
  --surface-tint:     var(--blue-50);
  --surface-inverse:  var(--blue-900);

  /* Text */
  --text-strong:      var(--neutral-900);  /* headings */
  --text-body:        var(--neutral-700);  /* paragraphs */
  --text-muted:       var(--neutral-500);  /* secondary */
  --text-subtle:      var(--neutral-400);  /* captions, placeholders */
  --text-brand:       var(--blue-500);     /* links, eyebrows */
  --text-on-brand:    var(--neutral-0);
  --text-on-dark:     var(--neutral-25);

  /* Borders */
  --border:           var(--neutral-100);
  --border-strong:    var(--neutral-200);
  --border-focus:     var(--blue-500);

  /* Status */
  --success: var(--green-500); --success-bg: var(--green-50);
  --warning: var(--amber-500); --warning-bg: var(--amber-50);
  --danger:  var(--red-500);   --danger-bg:  var(--red-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 35%, transparent);
}