/* TraderNSYT design tokens — implements UI_PRINCIPLES.md §4 (palette) and
 * §5 (typography direction). Values are specified in
 * docs/projects/tnsyt/architecture/design/design_system_plan.md, which
 * cites UI_PRINCIPLES as its source. Color carries meaning or it is absent.
 *
 * TNSYT_1-S02 (S7 ruling #3 — curated themes): the color variables are
 * split into a THEMEABLE set and a LOCKED set. Curated theme scopes in
 * src/styles/themes.css re-declare THEMEABLE variables only; LOCKED
 * variables are declared once, here, and never inside a theme scope. Every
 * value below is byte-identical to Phase 0 — the split moved names, never
 * hex. Two extractions (documented, same hex as the Phase 0 teal #18d6cc):
 *   --profit-teal  the teal's numeric/positive role, split out of the
 *                  dual-role --accent-teal so the trading semantic can be
 *                  locked while the interactive accent stays themeable
 *   --focus-ring   the :focus-visible outline color, previously read from
 *                  --accent-teal directly
 */
:root {
  /* ── THEMEABLE — surfaces, text, structure, interactive accents.
   * These are the base (default-theme) values; each curated theme scope in
   * src/styles/themes.css re-declares exactly this set. The default theme
   * (aurra-dark) re-declares them with these exact values. */

  /* Surfaces (UI_PRINCIPLES §4, brand-supplied) */
  --bg-black: #02070a;        /* primary app background */
  --surface-deep: #0b1114;    /* panels, writing pane, table bodies */
  --surface-elevated: #141a1d;/* row hover / active panel tone — never a card */

  /* Interactive accents — meaning only, never decoration */
  --accent-teal: #18d6cc;     /* interactive/active on CONTROLS; the numeric
                               * positive role is the LOCKED --profit-teal */
  --accent-glow: #38fff2;     /* rationed: genuine signal moments only */

  /* Structure + text */
  --hairline: #6e7a80;        /* muted slate; use at low opacity for rules */
  --text-primary: #f5f7fa;
  --text-muted: #9aa4aa;

  /* ── LOCKED (UI_PRINCIPLES §4 "Themes") — trading-semantic colors and
   * the focus ring live OUTSIDE the theme cascade. Declared once, here,
   * and NEVER re-declared inside any theme-* scope in themes.css, so
   * structure alone makes them un-themeable (a unit test enforces this).
   * P&L signs always render as characters, never color-only. LOCKED:
   *   --profit-teal    positive/profit on numbers
   *   --loss-red       negative/loss on numbers
   *   --warning-amber  warning + insufficient-sample (n<30) verdicts
   *   --focus-ring     the :focus-visible outline */
  --profit-teal: #18d6cc;     /* teal on a NUMBER means positive */
  /* PROPOSED, not brand-ratified (owner to bless the final value): */
  --loss-red: #f0564a;        /* negative/loss P&L */
  --warning-amber: #ffb020;   /* warnings + insufficient-sample (n<30) */
  --focus-ring: #18d6cc;      /* focus outline; same hex as Phase 0 */

  /* ── Not part of the theme contract — type, spacing, geometry, shell.
   * Themes re-tint; they never change fonts, density, or layout. */

  /* Type */
  --font-prose: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;

  /* Spacing scale — tight, density-biased (design plan §14.1) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;

  /* Geometry: near-square, hairline structure, no shadows */
  --radius: 3px;
  --rule: 1px solid color-mix(in srgb, var(--hairline) 25%, transparent);

  /* Chip vocabulary (TNSYT_JX-S04 / mockup §05) — teal = linked datum fill;
   * neutral = free tag fill. Derived from themeable accents, never raw hex. */
  --chip-teal: color-mix(in srgb, var(--accent-teal) 14%, transparent);
  --chip-neutral: color-mix(in srgb, var(--hairline) 16%, transparent);

  /* Shell dimensions (design plan §7.2 / §10.1) */
  --rail-width: 56px;
  /* Expanded rail hugs its labels: the longest ("Playbooks") ends at ~121px,
   * so 150px leaves a small trailing margin and no clipping. Tightened from
   * the 220px D1 recommendation after owner QA (2026-07-05) flagged ~99px of
   * dead space to the right of the labels — parity with Aurra is the model,
   * not the pixel width (spec D1). */
  --rail-width-expanded: 150px;
  --statusstrip-height: 24px;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg-black);
  color: var(--text-primary);
  font-family: var(--font-prose);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* The shell never scrolls — content areas are inner panels. Locking the
   * root kills the WKWebView elastic-overscroll bounce (Aurra pattern):
   * nothing to scroll means nothing may rubber-band. */
  overflow: hidden;
  overscroll-behavior: none;
}

/* Every quantity in the product renders with this class: monospace,
 * tabular figures, so digits align in columns (UI_PRINCIPLES §5). */
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* LOCKED focus ring (UI_PRINCIPLES §4 "Themes") — reads the un-themeable
 * --focus-ring, never a themeable accent. */
:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 1px;
}