/* ============================================================
   Liquid Edge — Color Tokens
   Sleek dark fintech. Deep charcoal base, neon electric-blue
   brand accent, disciplined P&L semantics (green up / red down).
   All base values are raw; semantic aliases sit at the bottom.
   ============================================================ */

:root {
  /* ---- Charcoal base ramp (backgrounds → text) ---- */
  --ink-900: #07090C;   /* deepest void / page base */
  --ink-850: #0A0E13;   /* app background */
  --ink-800: #0E131A;   /* base surface */
  --ink-750: #131922;   /* card / panel */
  --ink-700: #18202B;   /* elevated panel */
  --ink-650: #1E2733;   /* hover surface */
  --ink-600: #25313F;   /* active / pressed surface */

  /* ---- Hairlines & borders ---- */
  --line-strong: #2C3947;
  --line:        #222D3A;
  --line-soft:   #1A2330;

  /* ---- Neutral text ramp ---- */
  --slate-100: #E8EEF4;  /* primary text */
  --slate-200: #C2CDD9;  /* secondary text */
  --slate-300: #93A1B0;  /* tertiary / labels */
  --slate-400: #677584;  /* muted / placeholder */
  --slate-500: #46525F;  /* disabled */

  /* ---- Brand neon electric blue (liquidity) ---- */
  --blue-100: #D4E6FF;
  --blue-300: #7FB2FF;
  --blue-400: #2E86FF;   /* primary brand accent */
  --blue-500: #1E6AE0;
  --blue-600: #1551B5;
  --blue-700: #0E3B86;
  --blue-glow: rgba(46, 134, 255, 0.16);

  /* ---- P&L / status semantics ---- */
  --up-400:   #2FD477;   /* positive / long / profit */
  --up-600:   #1B8F4E;
  --up-bg:    rgba(47, 212, 119, 0.12);

  --down-400: #FF5247;   /* negative / short / loss */
  --down-600: #C4322A;
  --down-bg:  rgba(255, 82, 71, 0.12);

  --warn-400: #F2B544;   /* caution / pending */
  --warn-600: #B9821F;
  --warn-bg:  rgba(242, 181, 68, 0.12);

  --info-400: #46B7F5;   /* informational / cool */
  --info-600: #1E7FB8;
  --info-bg:  rgba(70, 183, 245, 0.12);

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

  /* surfaces */
  --bg-page:        var(--ink-850);
  --bg-base:        var(--ink-800);
  --surface-card:   var(--ink-750);
  --surface-raised: var(--ink-700);
  --surface-hover:  var(--ink-650);
  --surface-active: var(--ink-600);
  --surface-inset:  var(--ink-900);

  /* borders */
  --border-strong:  var(--line-strong);
  --border-default: var(--line);
  --border-subtle:  var(--line-soft);

  /* text */
  --text-primary:   var(--slate-100);
  --text-secondary: var(--slate-200);
  --text-tertiary:  var(--slate-300);
  --text-muted:     var(--slate-400);
  --text-disabled:  var(--slate-500);
  --text-on-accent: #FFFFFF;

  /* brand */
  --accent:         var(--blue-400);
  --accent-hover:   var(--blue-300);
  --accent-press:   var(--blue-500);
  --accent-quiet:   var(--blue-glow);

  /* data semantics */
  --pos:        var(--up-400);
  --pos-bg:     var(--up-bg);
  --neg:        var(--down-400);
  --neg-bg:     var(--down-bg);
  --warn:       var(--warn-400);
  --warn-bg-2:  var(--warn-bg);
  --info:       var(--info-400);
  --info-bg-2:  var(--info-bg);

  /* focus ring */
  --focus-ring: rgba(46, 134, 255, 0.55);
}