/* ============================================================
   JunoMarkets — Color tokens
   Source: JunoMarkets Brand Book (B-1 Basic Color, B-3 Special tech)
   Priority of brand color usage: orange > white > black
   ============================================================ */
:root {
  /* --- Brand orange (PANTONE 2018C / #FF6900) — the single hero color --- */
  --orange-50:  #FFF3EB;
  --orange-100: #FFE2CC;
  --orange-200: #FFC79A;
  --orange-300: #FFA866;
  --orange-400: #FF8A33;
  --orange-500: #FF6900; /* BRAND PRIMARY */
  --orange-600: #E25C00;
  --orange-700: #B84A00;
  --orange-800: #8F3A00;
  --orange-900: #5C2500;

  /* --- Neutrals (built around PANTONE Cool Gray 9C / #777777) --- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FAFAFB;
  --neutral-50:   #F4F5F6;
  --neutral-100:  #E9EAEC;
  --neutral-200:  #D5D7DB;
  --neutral-300:  #B4B7BD;
  --neutral-400:  #8A8E96;
  --neutral-500:  #777777; /* brand cool gray */
  --neutral-600:  #5A5C61;
  --neutral-700:  #3F4145;
  --neutral-800:  #26282B;
  --neutral-900:  #141517;
  --neutral-950:  #0A0A0B;
  --neutral-1000: #000000;

  /* --- Metals (B-3 special technology — gold & silver foil) --- */
  --gold:   #C6A86E; /* PANTONE 874U */
  --silver: #898C8E; /* PANTONE 877C */

  /* --- Market signal colors (added for trading surfaces; not in brand book) --- */
  --up-500:   #16B57F;
  --up-100:   #E1F6EE;
  --up-700:   #0E815A;
  --down-500: #F0473B;
  --down-100: #FDEAE8;
  --down-700: #B12A20;

  /* ============================================================
     Semantic aliases — reference these in product code
     ============================================================ */
  --color-primary:        var(--orange-500);
  --color-primary-hover:  var(--orange-600);
  --color-primary-active:  var(--orange-700);
  --color-primary-subtle: var(--orange-50);
  --color-primary-border: var(--orange-200);

  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-muted:      var(--neutral-400);
  --text-on-primary: var(--neutral-0);
  --text-on-dark:    var(--neutral-0);
  --text-link:       var(--orange-600);

  --surface-page:    var(--neutral-0);
  --surface-card:    var(--neutral-0);
  --surface-subtle:  var(--neutral-50);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--neutral-950);
  --surface-overlay: rgba(10, 10, 11, 0.55);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--orange-500);

  --positive:        var(--up-500);
  --positive-subtle: var(--up-100);
  --negative:        var(--down-500);
  --negative-subtle: var(--down-100);
}