/* ============================================================
   Alfia — Color tokens
   Industrial logistics palette: shipping-container blues on
   concrete-grey neutrals, with a navy ink for text.
   ============================================================ */
:root {
  /* --- Brand blues (from the Alfia brand sheet) ----------- */
  --brand-navy:     #0E2856; /* Text Navy — wordmark, headings */
  --brand-deep:     #1A53A0; /* Deep Container Blue — primary */
  --brand-mid:      #3273C8; /* Mid-Blue */
  --brand-bright:   #3C78EF; /* Bright Blue — links, accents  */
  --brand-sky:      #CADFF5; /* Light Sky tint                */
  --brand-concrete: #DCDCDC; /* Concrete Grey                 */

  /* --- Blue scale (ramped around the brand blues) --------- */
  --blue-50:  #EAF2FC;
  --blue-100: #CADFF5;
  --blue-200: #A5C6F0;
  --blue-300: #79A6E8;
  --blue-400: #3C78EF;
  --blue-500: #3273C8;
  --blue-600: #1A53A0;
  --blue-700: #164685;
  --blue-800: #133A6E;
  --blue-900: #0E2856;
  --blue-950: #091B3D;

  /* --- Concrete neutrals (cool grey, faint blue cast) ----- */
  --concrete-0:   #FFFFFF;
  --concrete-50:  #FAFBFC;
  --concrete-100: #F3F5F8;
  --concrete-200: #E6E9EF;
  --concrete-300: #DCDCDC;
  --concrete-400: #C2C6CE;
  --concrete-500: #9298A4;
  --concrete-600: #6B7280;
  --concrete-700: #4A515E;
  --concrete-800: #2C323D;
  --concrete-900: #1A1F28;

  /* --- Status / semantic hues ----------------------------- */
  --green-500:  #1E8A5B;
  --green-100:  #E2F3EA;
  --amber-500:  #C77A12;
  --amber-100:  #FAF0DA;
  --red-500:    #C73E3E;
  --red-100:    #FBE7E7;
  --teal-500:   #0E8C9B;
  --teal-100:   #DEF3F5;

  /* ============================================================
     Semantic aliases — reference these in components, not raw scale
     ============================================================ */
  /* Surfaces */
  --surface-page:    var(--concrete-50);
  --surface-card:    var(--concrete-0);
  --surface-sunken:  var(--concrete-100);
  --surface-raised:  var(--concrete-0);
  --surface-inverse: var(--brand-navy);
  --surface-brand:   var(--brand-deep);

  /* Text */
  --text-strong:   var(--brand-navy);
  --text-body:     #2C394F;
  --text-muted:    #687286;
  --text-subtle:   #9298A4;
  --text-inverse:  #FFFFFF;
  --text-on-brand: #FFFFFF;
  --text-link:     var(--brand-bright);

  /* Borders & lines */
  --border-subtle:  var(--concrete-200);
  --border-default: #D8DDE5;
  --border-strong:  var(--concrete-400);
  --border-brand:   var(--brand-deep);

  /* Interactive — primary action */
  --color-primary:        var(--brand-deep);
  --color-primary-hover:  #14437F;
  --color-primary-active: #0F3567;
  --color-accent:         var(--brand-bright);
  --color-accent-hover:   #2A66DC;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(60, 120, 239, 0.35);

  /* Status */
  --status-success:    var(--green-500);
  --status-success-bg: var(--green-100);
  --status-warning:    var(--amber-500);
  --status-warning-bg: var(--amber-100);
  --status-danger:     var(--red-500);
  --status-danger-bg:  var(--red-100);
  --status-info:       var(--brand-mid);
  --status-info-bg:    var(--blue-50);
}