/* ============================================================
   PARLEY · Design Tokens
   "Bloomberg-terminal seriousness meets Charm-ecosystem warmth."
   Monospace-only TUI system. 256-color-safe palette with a
   colorblind-safe variant and a full monochrome fallback.
   ------------------------------------------------------------
   Typeface: JetBrains Mono (loaded from Google Fonts CDN).
   NOTE: No original font files were provided with the brief, so
   JetBrains Mono is a documented substitute chosen for its
   excellent box-drawing + block-element coverage. Swap the
   @import + --font-mono if you have the canonical TUI font.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Typeface ---- */
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', ui-monospace, monospace;

  /* ---- Weights ---- */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */

  /* ---- Terminal cell grid ----
     The whole UI is laid out on a monospace cell. One "cell" = one
     character advance. Spacing tokens are multiples of the cell. */
  --cell-w: 0.60ch;            /* nominal advance width            */
  --tui-base: 15px;            /* default cell font-size           */
  --tui-line: 1.5;             /* @kind font */

  /* ---- Type scale (all monospace) ---- */
  --t-xs:   12px;   /* dense tables / footnotes                   */
  --t-sm:   13px;   /* secondary labels                          */
  --t-base: 15px;   /* body / terminal default                   */
  --t-lg:   18px;   /* pane titles                               */
  --t-xl:   22px;   /* screen headings                           */
  --t-2xl:  32px;   /* landing sub-display                       */
  --t-3xl:  48px;   /* landing display                           */
  --t-4xl:  68px;   /* hero wordmark                             */

  --lh-tight: 1.25;  /* @kind font */
  --lh-row:   1.5;   /* @kind font */
  --lh-loose: 1.7;   /* @kind font */

  --tracking-cap: 0.14em;  /* uppercase micro-labels              */

  /* ============================================================
     BASE PALETTE  (default / full color · 256-safe)
     ============================================================ */

  /* Backgrounds & surfaces */
  --bg:          #0E1116;   /* near-black app background          */
  --surface:     #161B22;   /* primary pane surface               */
  --surface-2:   #1C2230;   /* raised / selected row              */
  --surface-3:   #232B38;   /* hover / popover                    */
  --overlay:     rgba(8,10,14,0.66); /* modal scrim               */

  /* Borders (terminal pane rules) */
  --border:        #30363D; /* default pane border                */
  --border-muted:  #21262D; /* inner dividers                     */
  --border-strong: #3D4654; /* focused / active pane              */

  /* Text */
  --fg:        #E6EDF3;     /* primary text                       */
  --fg-muted:  #8B949E;     /* secondary / labels                 */
  --fg-faint:  #6E7681;     /* disabled / ghost help              */
  --fg-invert: #0E1116;     /* text on accent fills               */

  /* Brand / accent — deep teal-cyan */
  --accent:       #2DD4BF;
  --accent-dim:   #1B8A7E;  /* filled-meter / pressed             */
  --accent-faint: rgba(45,212,191,0.14); /* tint wash / selection */
  --accent-glow:  rgba(45,212,191,0.35);  /* focus ring           */

  /* Financial signals (stance / P&L) */
  --buy:   #3FB950;  --buy-dim:  #238636;  --buy-tint:  rgba(63,185,80,0.13);
  --sell:  #F85149;  --sell-dim: #B62324;  --sell-tint: rgba(248,81,73,0.13);
  --hold:  #D29922;  --hold-dim: #9E6A03;  --hold-tint: rgba(210,153,34,0.13);

  /* Debate tints — bull arguments green, bear arguments red */
  --bull:      #3FB950;  --bull-wash: rgba(63,185,80,0.10);
  --bear:      #F85149;  --bear-wash: rgba(248,81,73,0.10);

  /* Data-viz */
  --spark:     var(--accent);     /* sparklines / meters          */
  --meter-track: #232B38;         /* unfilled bar track           */
  --grid-line: rgba(139,148,158,0.12);

  /* Status accents (toasts) */
  --info: var(--accent);
  --warn: var(--hold);
  --ok:   var(--buy);
  --err:  var(--sell);

  /* ---- Radii (terminal panes are mostly square; small softening) ---- */
  --r-sq:  0px;    /* k9s/lazygit square panes                    */
  --r-sm:  4px;    /* gum-style soft pane / button                */
  --r-md:  6px;
  --r-pill: 999px;

  /* ---- Shadows / elevation (used sparingly; terminals are flat) ---- */
  --shadow-pane:  0 0 0 1px var(--border);              /* "border as elevation" */
  --shadow-pop:   0 8px 28px -8px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
  --shadow-toast: 0 6px 22px -6px rgba(0,0,0,0.75), 0 0 0 1px var(--border-strong);
  --focus-ring:   0 0 0 1px var(--bg), 0 0 0 2px var(--accent);

  /* ---- Spacing (cell-derived) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* ---- Motion (subtle; respects --no-animation) ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur:      200ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ============================================================
   COLORBLIND-SAFE VARIANT  [data-palette="cb"]
   Red/green are ambiguous for deuteran/protan vision. Swap the
   buy/sell hues for a blue/orange pair (still reinforced by the
   ▲▼ glyph + text label — never color alone).
   ============================================================ */
[data-palette="cb"] {
  --buy:   #58A6FF;  --buy-dim:  #1F6FEB;  --buy-tint:  rgba(88,166,255,0.14);
  --sell:  #DB6D28;  --sell-dim: #BB5418;  --sell-tint: rgba(219,109,40,0.14);
  --hold:  #D29922;  --hold-dim: #9E6A03;  --hold-tint: rgba(210,153,34,0.13);
  --bull:  #58A6FF;  --bull-wash: rgba(88,166,255,0.10);
  --bear:  #DB6D28;  --bear-wash: rgba(219,109,40,0.10);
  --accent:#2DD4BF;  /* teal stays distinct from both             */
}

/* ============================================================
   MONOCHROME FALLBACK  [data-palette="mono"]
   No-color terminals. Everything is greyscale; stance & P&L are
   carried entirely by glyph + label. Brightness encodes hierarchy.
   ============================================================ */
[data-palette="mono"] {
  --accent:#E6EDF3; --accent-dim:#8B949E; --accent-faint:rgba(230,237,243,0.10); --accent-glow:rgba(230,237,243,0.30);
  --buy:#E6EDF3; --buy-dim:#8B949E; --buy-tint:rgba(230,237,243,0.08);
  --sell:#8B949E; --sell-dim:#6E7681; --sell-tint:rgba(139,148,158,0.10);
  --hold:#B6BEC8; --hold-dim:#6E7681; --hold-tint:rgba(182,190,200,0.08);
  --bull:#E6EDF3; --bull-wash:rgba(230,237,243,0.06);
  --bear:#8B949E; --bear-wash:rgba(139,148,158,0.08);
  --spark:#B6BEC8; --info:#E6EDF3; --warn:#B6BEC8; --ok:#E6EDF3; --err:#8B949E;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply on a root container (e.g. body.parley) to get the
   terminal baseline for free.
   ============================================================ */
.parley {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  line-height: var(--lh-row);
  font-weight: var(--w-regular);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.parley h1, .tui-h1 { font-size: var(--t-xl); font-weight: var(--w-bold);  line-height: var(--lh-tight); margin: 0; }
.parley h2, .tui-h2 { font-size: var(--t-lg); font-weight: var(--w-bold);  line-height: var(--lh-tight); margin: 0; }
.tui-title          { font-size: var(--t-base); font-weight: var(--w-bold); letter-spacing: 0.02em; }
.tui-label          { font-size: var(--t-xs); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: var(--tracking-cap); color: var(--fg-muted); }
.tui-muted          { color: var(--fg-muted); }
.tui-faint          { color: var(--fg-faint); }
.tui-num            { font-variant-numeric: tabular-nums; }

/* stance / signal text helpers */
.is-buy  { color: var(--buy);  }
.is-sell { color: var(--sell); }
.is-hold { color: var(--hold); }
.is-accent { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; /* @kind other */ --dur: 0ms; /* @kind other */ --dur-slow: 0ms; /* @kind other */ }
}