/* ================================================================
 * DESIGN TOKENS  |  The Losing Trader  v2.0 "Institutional"
 * ================================================================
 * Enterprise fintech design language: calm, precise, engineered.
 * Muted navy-black surfaces, hairline 1px borders, square geometry,
 * hierarchy through typography + spacing rather than colour.
 * Inspiration: Linear / Stripe / Bloomberg Terminal (original language).
 *
 * Pure presentation reskin — no logic/data/formula changes. Same
 * token NAMES as before so every existing usage keeps working; only
 * VALUES change. The per-screen brand palettes (green/blue/purple/
 * amber/teal) are collapsed onto ONE neutral system: identity now
 * comes from type + spacing, not five accent colours.
 * ================================================================ */

/* ── Self-hosted fonts (OFL, subset, variable) ─────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
}

:root {

  /* ── Backgrounds: navy-black base + tonal panel elevation ───── */
  --bg:        #0B0F17;   /* app background */
  --surface:   #111726;   /* panel / card (elevation 1) */
  --surface-2: #161D2E;   /* inputs, table/section headers (elevation 2) */
  --surface-3: #1C2536;   /* hover / raised (elevation 3) */

  /* ── Borders: 1px hairlines, crisp separators ──────────────── */
  --border:    #222B3D;
  --border-2:  #2E3950;

  /* ── Text: hierarchy by tone, not colour ───────────────────── */
  --text:      #E6EAF2;   /* primary */
  --text-2:    #95A0B4;   /* muted slate secondary */
  --text-3:    #7C879B;   /* tertiary labels — dim but AA-legible (4.9:1 on panels) */

  /* ── Focus: professional blue — the ONLY accent, focus only ── */
  --accent:    #4C7DF0;
  --ring:      rgba(76,125,240,0.45);

  /* ── Primary action: restrained near-white (Linear-style) ──── */
  --btn-bg:      #E9ECF3;
  --btn-bg-hover:#FFFFFF;
  --btn-text:    #0B0F17;

  /* ── Field states ──────────────────────────────────────────── */
  --field-done-border: #4E9E7F;
  --field-done-bg:     rgba(78,158,127,0.09);
  --field-error-border:#C15D5D;
  --field-error-bg:    rgba(193,93,93,0.10);
  --field-error-text:  #D98A8A;

  /* ── Semantic: Loss / Risk (muted professional red) ────────── */
  --loss-red:    #D07A78;   /* text / numbers on dark */
  --loss-bg:     rgba(193,93,93,0.10);
  --loss-border: rgba(193,93,93,0.32);
  --loss-solid:  #9E4343;   /* solid fill + light text */

  /* ── Semantic: Profit / Safety (muted professional green) ──── */
  --profit-green:  #5FB795;   /* text / numbers on dark */
  --profit-bg:     rgba(78,158,127,0.11);
  --profit-border: rgba(78,158,127,0.30);
  --profit-solid:  #2F6E57;

  /* ── Semantic: Warning (muted professional amber) ──────────── */
  --warn-bg:     rgba(199,154,85,0.11);
  --warn-border: rgba(199,154,85,0.30);
  --warn-text:   #CBA268;

  /* ── Legacy brand palettes → collapsed to the neutral system ──
   * Kept as aliases so existing per-screen usages resolve to the
   * institutional look without touching every rule. "Dark" tones are
   * panel surfaces (ribbons/fills), "text" tones are the light on-panel
   * text, "md/hi" are muted accents, "lt" are subtle tints. */
  --green-dk: var(--surface);   --green-md: var(--text-2);  --green-lt: var(--surface-2);  --green-text: var(--text);
  --blue-dk:  var(--surface);   --blue-md:  var(--accent);  --blue-lt:  rgba(76,125,240,0.12); --blue-text: var(--text);
  --purple-dk:var(--surface);   --purple-md:var(--text-2);  --purple-lt:var(--surface-2);  --purple-text: var(--text); --purple-hi: var(--text-2); --purple-border: var(--border);
  --amber-dk: var(--surface);   --amber-md: var(--warn-text); --amber-lt: var(--surface-2); --amber-text: var(--text); --amber-hi: var(--warn-text); --amber-border: var(--border);
  --teal-dk:  var(--surface);   --teal-md:  var(--text-2);  --teal-lt:  var(--surface-2);  --teal-text: var(--text);  --teal-hi:  var(--text-2); --teal-border: var(--border);

  /* ── Typography ────────────────────────────────────────────── */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* headings now sans, no serif */
  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;

  /* ── Geometry: square. Institutional, engineered. ──────────── */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* ── Elevation: tonal, not shadow. Kept minimal/flat. ──────── */
  --shadow:    none;
  --shadow-md: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-gold: none;   /* legacy alias — no glow in institutional */

  /* ── Spacing: strict 8-point system ────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ── Motion: tasteful, 150-250ms, fade/opacity/subtle move ─── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:     140ms;
  --t:          200ms;
  --t-slow:     240ms;
}

/* Numeric figures line up in columns everywhere the mono face is used. */
:root { font-variant-numeric: tabular-nums; }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}