/*    ==========================================================================
   FINAL DESIGN TOKENS — Investment Analyzer (dark-blue + approved deltas)
   --------------------------------------------------------------------------
   Installed by rollout stage R1 (2026-10-22) from the owner-approved mockups
   (Redesign Plan - Stock Analysis Software/mockups/assets/tokens.css). It
   starts from the designkit "dark-blue" look
   (design-themes/tokens-dark-blue.css) with THREE documented deltas, two of
   them owner-decided (see REDESIGN-PLAN.md §3/§10):

   1. GAIN/LOSS COLOUR CONVENTION IS A USER PREFERENCE (decision D2, the
      industry gold standard used by Futu/moomoo, Webull and IBKR). Both
      pairs ship in this file; --color-positive/--color-negative are the
      ACTIVE pair and flip with one attribute on <html>:
        data-conv="cn"   → red up / green down  (Chinese / East Asian standard)
        data-conv="intl" → green up / red down  (Western / international)
      The default resolves from the user's locale at first run (zh → cn),
      then the stored preference wins. .pos/.neg/.up/.down class names are
      unchanged, so app.js needs no logic change either way.
   2. --chart-3 moved off green (#34D399 → #38BDF8) so no per-ticker series
      colour collides with the "down" semantic.
   3. Attention/error states (auth error, "failed" chip, .state.error,
      unread dots) use --color-warning, NEVER the market direction tokens —
      a green error message is the failure mode this prevents.

   The 400-level pair (#F87171 / #4ADE80) replaces the kit's 500-level pair
   for contrast on --color-surface (≈6.0:1 and ≈8.5:1 vs 4.0:1 / 6.6:1).

   Checker constraints honoured (designkit profile "stocks"):
   font sizes 11/12/13/15/20 only · radii 4/6 (999 for pills) ·
   no colour outside :root · no emoji (Lucide-style inline SVG icons) ·
   font-variant-numeric: tabular-nums on all numeric text.
   ========================================================================== */
:root{
  /* surfaces */
  --color-bg:#0B0F14;
  --color-surface:#121821;
  --color-surface-raised:#1A2230;
  --color-border:#263042;
  /* text */
  --color-text:#E6EAF0;
  --color-text-muted:#8B96A8;
  /* brand + semantics */
  --color-primary:#3B82F6;
  --color-on-primary:#FFFFFF;         /* text/icon on --color-primary fills */
  --color-warning:#FBBF24;
  /* gain/loss colour pairs (D2 — user preference, default by locale).
     Both conventions ship; the ACTIVE pair is selected by data-conv on <html>. */
  --up-cn:#F87171;                    /* Chinese / East Asian: up = red   */
  --down-cn:#4ADE80;                  /* Chinese / East Asian: down = green */
  --up-intl:#4ADE80;                  /* Western / international: up = green */
  --down-intl:#F87171;                /* Western / international: down = red */
  --color-positive:var(--up-cn);      /* ACTIVE pair — default: Chinese (zh locale) */
  --color-negative:var(--down-cn);
  /* per-ticker chart palette (distinguishable on --color-surface) */
  --chart-1:#60A5FA;
  --chart-2:#FBBF24;
  --chart-3:#38BDF8;
  --chart-4:#F472B6;
  --chart-5:#A78BFA;
  --chart-6:#2DD4BF;
  /* price chart candles — derived, never independent */
  --candle-up:var(--color-positive);
  --candle-down:var(--color-negative);
  /* typography */
  --font: Inter, system-ui, sans-serif;
  --fs-tiny:11px;
  --fs-small:12px;
  --fs-base:13px;
  --fs-section:15px;
  --fs-title:20px;
  /* shape */
  --r-sm:4px;
  --r-md:6px;
  /* spacing — 4px scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* fixed shell metrics */
  --row-h:32px;
  --nav-w:220px;
  --topbar-h:48px;
}

/* D2 — the convention switch. One attribute on <html> flips every gain/loss
   colour in the app (candles derive from the same pair). The rebuild keeps
   this file LINKED (not pasted into :root) so the selector survives. */
:root[data-conv="intl"]{
  --color-positive:var(--up-intl);
  --color-negative:var(--down-intl);
}