/* ============================================================
   AiStrats — Color tokens
   Brand palette harmonised with the BMC identity.
   Base ramp = navy → azure (the "rising strata" idea).
   ============================================================ */

:root {
  /* ---- Brand core (from the brand sheet) ---- */
  --brand-navy:  #063358;   /* deepest — anchors the family            */
  --brand-ink:   #0B2540;   /* near-black navy — chrome, top bars      */
  --brand-steel: #0D4D84;   /* mid-dark blue                           */
  --brand-blue:  #1266AC;   /* primary blue                            */
  --brand-azure: #19A8E6;   /* the "Ai" spark — accent / AI signals    */
  --brand-mist:  #F2F7FB;   /* palest tint — app background            */

  /* ---- Azure tint ramp (accent washes, hovers, fills) ---- */
  --azure-50:  #ECF7FD;
  --azure-100: #D2ECFA;
  --azure-200: #A6D8F4;
  --azure-300: #6FBFEC;
  --azure-400: #3F9BD6;   /* bar 3 of the icon                          */
  --azure-500: #19A8E6;   /* = brand-azure                              */
  --azure-600: #1283C2;
  --azure-700: #0D4D84;   /* = brand-steel                              */

  /* ---- Neutral ramp (cool, navy-biased grays) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #F8FAFC;
  --neutral-50:  #F2F7FB;   /* = mist                                    */
  --neutral-100: #E8EFF6;
  --neutral-200: #D7E2ED;
  --neutral-300: #BCCBDB;
  --neutral-400: #93A6BC;
  --neutral-500: #6B7F98;
  --neutral-600: #4E6379;
  --neutral-700: #34475C;
  --neutral-800: #1C2F45;
  --neutral-900: #0B2540;   /* = ink                                     */

  /* ---- Market semantics (trading) ---- */
  --pos-700: #0A7C56;
  --pos-500: #0EA371;   /* gain — cool emerald, harmonises with azure   */
  --pos-100: #DBF3EA;
  --neg-700: #C0353A;
  --neg-500: #E14B4F;   /* loss — warm red, kept slightly desaturated   */
  --neg-100: #FBE4E5;
  --warn-700: #B7791F;
  --warn-500: #E8A12C;  /* caution — amber                              */
  --warn-100: #FBEFD6;
  --info-500: #1266AC;  /* = brand-blue                                 */

  /* ---- Chart sequence (the icon's ascending bars) ---- */
  --chart-1: #0D4D84;
  --chart-2: #1266AC;
  --chart-3: #3F9BD6;
  --chart-4: #19A8E6;
  --chart-5: #6FBFEC;
  --chart-6: #0EA371;
  --chart-7: #E8A12C;

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

  /* Surfaces */
  --surface-app:      var(--brand-mist);      /* page background        */
  --surface-card:     var(--neutral-0);       /* cards, panels          */
  --surface-sunken:   var(--neutral-50);      /* wells, table zebra     */
  --surface-raised:   var(--neutral-0);
  --surface-chrome:   var(--brand-ink);       /* dark nav rail / header */
  --surface-chrome-2: #102E4D;                /* hover on chrome        */
  --surface-inverse:  var(--brand-navy);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-500);
  --text-faint:    var(--neutral-400);
  --text-on-brand: #FFFFFF;
  --text-on-chrome:#E8EFF6;
  --text-link:     var(--brand-blue);

  /* Borders & lines */
  --border-subtle: var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-chrome: rgba(255,255,255,0.10);
  --focus-ring:    rgba(25,168,230,0.45);

  /* Interactive (azure primary) */
  --action-primary:        var(--brand-azure);
  --action-primary-hover:  #1190CC;
  --action-primary-press:  #0F7DB2;
  --action-on-primary:     #FFFFFF;
  --action-secondary-bg:   var(--neutral-0);
  --action-secondary-bd:   var(--neutral-200);

  /* Status (semantic, theme-facing) */
  --status-pos:   var(--pos-500);
  --status-neg:   var(--neg-500);
  --status-warn:  var(--warn-500);
  --status-info:  var(--info-500);
  --status-live:  var(--pos-500);
}