/* ============================================================
   EBTHub — Color tokens
   The stack: Orange / Purple / Blue, on near-black.
   Dark backgrounds are primary. Orange is for accents & CTAs only.
   ============================================================ */
:root {
  /* ---- Brand core (exact, sampled from the logo) ---- */
  --ebt-orange: #ff8c03;   /* accent / CTA only */
  --ebt-purple: #5d5dbf;   /* periwinkle, the middle bar */
  --ebt-blue:   #1d38dc;   /* royal, the structural brand color */
  --ebt-ink:    #1b1919;   /* near-black, primary surface */
  --ebt-stone:  #beb9b7;   /* warm grey, muted text on dark */

  /* ---- Orange ramp (accent) ---- */
  --orange-600: #d9760a;
  --orange-500: #ff8c03;
  --orange-400: #ff9f33;
  --orange-300: #ffb866;

  /* ---- Blue ramp (structure) ---- */
  --blue-700: #1429a8;
  --blue-600: #1d38dc;
  --blue-500: #3450e6;
  --blue-400: #5a72ef;

  /* ---- Purple ramp (secondary) ---- */
  --purple-600: #4a4aa8;
  --purple-500: #5d5dbf;
  --purple-400: #7d7dd0;

  /* ---- Neutral ramp (warm-cool near-black through stone) ---- */
  --neutral-1000: #0e0d0d;  /* deepest */
  --neutral-950:  #161414;
  --neutral-900:  #1b1919;  /* primary ink surface */
  --neutral-800:  #262323;  /* raised surface */
  --neutral-700:  #353131;  /* hairline borders on dark */
  --neutral-600:  #4a4544;
  --neutral-400:  #8a8482;
  --neutral-300:  #beb9b7;  /* stone */
  --neutral-200:  #d8d4d2;
  --neutral-100:  #ebe8e6;
  --neutral-050:  #f5f3f1;
  --white:        #ffffff;

  /* ---- Semantic — DARK is the primary mode ---- */
  --surface-base:    var(--neutral-900);  /* page background */
  --surface-raised:  var(--neutral-800);  /* cards, panels */
  --surface-sunken:  var(--neutral-1000);
  --surface-invert:  var(--neutral-050);  /* light sections */

  --border-hairline: var(--neutral-700);
  --border-strong:   var(--neutral-600);
  --border-brand:    var(--ebt-blue);

  --text-primary:    var(--white);
  --text-secondary:  var(--neutral-300);  /* stone */
  --text-muted:      var(--neutral-400);
  --text-on-light:   var(--neutral-900);
  --text-accent:     var(--ebt-orange);
  --text-link:       var(--ebt-blue);

  --action-primary:        var(--ebt-orange);  /* CTA */
  --action-primary-hover:  var(--orange-400);
  --action-primary-press:  var(--orange-600);
  --action-on-primary:     var(--neutral-1000);

  --action-secondary:      var(--ebt-blue);
  --action-secondary-hover:var(--blue-500);

  --accent-tertiary:       var(--ebt-purple);  /* periwinkle — categorical / Lab accent, highlights */
  --accent-tertiary-soft:  var(--purple-600);

  /* ---- The three-bar motif, in order O / P / B ---- */
  --bar-1: var(--ebt-orange);
  --bar-2: var(--ebt-purple);
  --bar-3: var(--ebt-blue);

  /* ---- Focus ---- */
  --focus-ring: var(--ebt-orange);
}