/* OFM Top Line — Color tokens (base design-system scale).
   Brand values are overridden in css/brand.css with the real OFM palette
   (yellow #EEBA01 + grey #4C4C4C). */
:root {
  /* ---- Brand: OFM primary scale ---- */
  --ofm-blue-900: #0A2438;
  --ofm-blue-800: #0E3049;
  --ofm-blue-700: #123B5A;
  --ofm-blue-600: #1A4E75;
  --ofm-blue-500: #23628F;
  --ofm-blue-400: #4C83AD;
  --ofm-blue-300: #86AECB;
  --ofm-blue-200: #C1D6E5;
  --ofm-blue-100: #E5EEF4;
  --ofm-blue-50:  #F2F7FA;

  /* ---- Brand: accent / CTA scale ---- */
  --ofm-orange-700: #B33F12;
  --ofm-orange-600: #D14D17;
  --ofm-orange-500: #E4571B;
  --ofm-orange-400: #EE7440;
  --ofm-orange-300: #F49E76;
  --ofm-orange-200: #F9C8B0;
  --ofm-orange-100: #FCE7DC;

  /* ---- Steel neutrals ---- */
  --steel-950: #10151A;
  --steel-900: #1A2127;
  --steel-800: #2A333B;
  --steel-700: #3C4750;
  --steel-600: #566470;
  --steel-500: #71818D;
  --steel-400: #96A3AD;
  --steel-300: #BFC9D0;
  --steel-200: #DCE2E7;
  --steel-100: #ECF0F3;
  --steel-50:  #F5F7F9;
  --white:     #FFFFFF;

  /* ---- Semantic status ---- */
  --green-600: #2E7D46;
  --green-100: #E3F3E8;
  --amber-600: #B9791C;
  --amber-100: #FBF0DA;
  --red-600:   #C23A2B;
  --red-100:   #FADEDA;
  --info-600:  #23628F;
  --info-100:  #E5EEF4;

  /* =========================================================
     Semantic aliases — reference these in components/UI kits
     ========================================================= */
  --color-brand:            var(--ofm-blue-700);
  --color-brand-strong:     var(--ofm-blue-900);
  --color-brand-soft:       var(--ofm-blue-100);
  --color-accent:           var(--ofm-orange-500);
  --color-accent-strong:    var(--ofm-orange-600);
  --color-accent-soft:      var(--ofm-orange-100);

  --text-strong:            var(--steel-950);
  --text-body:              var(--steel-800);
  --text-muted:             var(--steel-600);
  --text-subtle:            var(--steel-500);
  --text-inverse:           var(--white);
  --text-brand:             var(--ofm-blue-700);
  --text-link:              var(--ofm-blue-600);
  --text-link-hover:        var(--ofm-orange-600);

  --surface-page:           var(--white);
  --surface-alt:            var(--steel-50);
  --surface-card:           var(--white);
  --surface-sunken:         var(--steel-100);
  --surface-inverse:        var(--ofm-blue-900);
  --surface-brand:          var(--ofm-blue-700);

  --border-subtle:          var(--steel-200);
  --border-default:         var(--steel-300);
  --border-strong:          var(--steel-500);
  --border-brand:           var(--ofm-blue-700);

  --focus-ring:             var(--ofm-orange-500);
}