/* TraderMatrix — colour tokens
 * Generated 27 August 2026. Dark-first; the light set is the print/light-mode pair.
 * Ramps are perceptually even (OKLCH, constant hue, tapered chroma).
 */
:root {
  /* ---- core brand ---- */
  --tm-navy:            #070E1F;  /* the brand ground. logo plates, page base */
  --tm-gold:            #D4A62A;  /* the M, CTAs, accents. sampled from the mark */
  --tm-steel:           #7B97BA;  /* the candlesticks */

  /* ---- grounds (authored, dark to light) ---- */
  --tm-ground-base:     #050A18;  /* page background */
  --tm-ground-brand:    #070E1F;  /* brand navy */
  --tm-ground-raised:   #0A1426;  /* gradient mid, raised bands */
  --tm-surface-1:       #0C1526;  /* cards */
  --tm-surface-2:       #111C33;  /* nested cards, table headers */
  --tm-surface-3:       #16233D;  /* popovers, menus */

  /* ---- lines ---- */
  --tm-border-hair:     rgba(148,168,200,0.11);  /* solid equiv #171F32 */
  --tm-border-line:     rgba(59,130,246,0.20);   /* solid equiv #11254A */
  --tm-dot-grid:        rgba(59,130,246,0.11);   /* solid equiv #0D1B37 */

  /* ---- text on dark ---- */
  --tm-text-primary:    #EEF2F8;  /* 17.1:1 on navy */
  --tm-text-secondary:  #B9C5D8;  /* 11.0:1 */
  --tm-text-muted:      #8B9AB4;  /*  6.8:1 */
  --tm-text-dim:        #5D6B85;  /*  3.6:1 — labels only, never body */
  --tm-wordmark-steel:  #C8D8EC;  /* the wordmark on dark */

  /* ---- gold ramp (brand gold sits at 300) ---- */
  --tm-gold-50:  #FFF5DF;
  --tm-gold-100: #FFE7B1;
  --tm-gold-200: #FBCD60;
  --tm-gold-300: #D4A62A;  /* brand */
  --tm-gold-400: #C69915;
  --tm-gold-500: #A98106;
  --tm-gold-600: #8C6B07;
  --tm-gold-700: #6D5205;
  --tm-gold-800: #4B3800;
  --tm-gold-900: #2A1E01;
  --tm-gold-bright: #E9BC42;  /* hover / bright gold text */

  /* ---- steel ramp (brand steel sits at 400) ---- */
  --tm-steel-50:  #F0F6FF;
  --tm-steel-100: #DBEBFF;
  --tm-steel-200: #BBD6F9;
  --tm-steel-300: #A0BCDF;
  --tm-steel-400: #7B97BA;  /* brand */
  --tm-steel-500: #6F8AAC;
  --tm-steel-600: #587292;
  --tm-steel-700: #415876;
  --tm-steel-800: #283C56;
  --tm-steel-900: #0F2136;

  /* ---- semantic. interface only, never in brand art ---- */
  --tm-bull:            #10B981;
  --tm-bull-tint:       rgba(16,185,129,0.15);   /* solid equiv #08282E */
  --tm-bear:            #EF4444;
  --tm-bear-tint:       rgba(239,68,68,0.15);    /* solid equiv #2A1625 */
  --tm-info:            #60A5FA;
  --tm-info-tint:       rgba(96,165,250,0.15);   /* solid equiv #142540 */
  --tm-violet:          #A855F7;
  --tm-violet-tint:     rgba(168,85,247,0.15);   /* solid equiv #1F193F */
  --tm-warn:            #E9BC42;

  /* ---- accent tints ---- */
  --tm-tint-gold:       rgba(212,166,42,0.14);   /* solid equiv #242321 */
  --tm-tint-gold-hi:    rgba(212,166,42,0.22);   /* solid equiv #342F21 */
  --tm-tint-neutral:    rgba(148,168,200,0.08);  /* solid equiv #121A2D */
}

/* ---- light mode / print pair ---- */
:root[data-theme="light"] {
  --tm-ground-base:     #F2F5F8;
  --tm-ground-brand:    #FFFFFF;
  --tm-ground-raised:   #E7ECF2;
  --tm-surface-1:       #FFFFFF;
  --tm-surface-2:       #F2F5F8;
  --tm-surface-3:       #FFFFFF;

  --tm-border-hair:     rgba(16,26,45,0.12);
  --tm-border-line:     rgba(37,99,235,0.26);

  --tm-text-primary:    #0F172A;  /* 16.4:1 on #F2F5F8 */
  --tm-text-secondary:  #33415C;  /*  9.0:1 */
  --tm-text-muted:      #55627A;  /*  5.6:1 */
  --tm-text-dim:        #6F7C93;  /*  3.9:1 */
  --tm-wordmark-steel:  #070E1F;

  /* gold and steel need deeper steps to pass on light */
  --tm-gold:            #8C6B07;  /* 5.6:1 on #F2F5F8 — use for gold TEXT */
  --tm-steel:           #415876;
  --tm-bull:            #047857;
  --tm-bear:            #B91C1C;
  --tm-info:            #1D4ED8;
  --tm-violet:          #6D28D9;
}