/* ============================================================
   Hoffer Flow Controls — Color Tokens
   ------------------------------------------------------------
   Royal-blue dominant (the Hoffer wordmark blue), deep navy for
   structural surfaces, a warm amber/brass accent for emphasis &
   CTAs, and cool steel-gray neutrals. Semantic colors read like
   instrument states: in-spec green, fault red, warning amber.
   ============================================================ */

:root {
  /* ---- Brand blue (primary) ---------------------------------- */
  --blue-50:  #eef4fc;
  --blue-100: #d8e6f8;
  --blue-200: #b0caee;
  --blue-300: #7ba6e0;
  --blue-400: #4a82d1;
  --blue-500: #2563bf;   /* primary action */
  --blue-600: #1b4f9c;   /* Hoffer nav blue */
  --blue-700: #163f7d;
  --blue-800: #132f5c;
  --blue-900: #0e2342;   /* deep navy surface */
  --blue-950: #081628;   /* ink navy */

  /* ---- Amber / brass (accent) -------------------------------- */
  --amber-50:  #fff7e6;
  --amber-100: #ffecc2;
  --amber-200: #ffd980;
  --amber-300: #ffc94d;
  --amber-400: #fbb521;
  --amber-500: #f59e0b;   /* accent */
  --amber-600: #d97f06;
  --amber-700: #a85e08;

  /* ---- Steel neutrals (cool gray) ---------------------------- */
  --steel-0:   #ffffff;
  --steel-50:  #f6f8fa;
  --steel-100: #eef1f4;
  --steel-200: #dfe4ea;
  --steel-300: #c6ced7;
  --steel-400: #9aa6b3;
  --steel-500: #6f7d8c;
  --steel-600: #515e6b;
  --steel-700: #3a444f;
  --steel-800: #28313a;
  --steel-900: #181e24;
  --steel-950: #0d1115;

  /* ---- Semantic (instrument states) -------------------------- */
  --green-50:  #e8f6ee;
  --green-500: #1f9d55;   /* in-spec / operational */
  --green-700: #136e3a;
  --red-50:    #fdecea;
  --red-500:   #d6453b;   /* fault / out-of-spec */
  --red-700:   #99281f;
  --cyan-500:  #1198c4;   /* flow / data highlight */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Brand */
  --brand:            var(--blue-600);
  --brand-strong:     var(--blue-700);
  --brand-ink:        var(--blue-950);
  --accent:           var(--amber-500);
  --accent-strong:    var(--amber-600);

  /* Surfaces */
  --surface-page:     var(--steel-50);
  --surface-card:     var(--steel-0);
  --surface-sunken:   var(--steel-100);
  --surface-inverse:  var(--blue-950);
  --surface-brand:    var(--blue-600);
  --surface-brand-deep: var(--blue-900);

  /* Text */
  --text-strong:      var(--steel-900);
  --text-body:        var(--steel-700);
  --text-muted:       var(--steel-500);
  --text-faint:       var(--steel-400);
  --text-on-brand:    #ffffff;
  --text-on-inverse:  var(--steel-100);
  --text-accent:      var(--amber-700);
  --text-link:        var(--blue-600);

  /* Borders & lines */
  --border-subtle:    var(--steel-200);
  --border-default:   var(--steel-300);
  --border-strong:    var(--steel-400);
  --border-brand:     var(--blue-600);
  --hairline:         color-mix(in srgb, var(--steel-900) 8%, transparent);

  /* Focus */
  --focus-ring:       color-mix(in srgb, var(--blue-500) 55%, transparent);

  /* Feedback */
  --ok:               var(--green-500);
  --ok-surface:       var(--green-50);
  --fault:            var(--red-500);
  --fault-surface:    var(--red-50);
  --warn:             var(--amber-500);
  --warn-surface:     var(--amber-50);
}