/* Design tokens — single source of truth for palette, type scale, spacing,
   motion, radii, elevation. All other CSS references var(--token); no hex
   elsewhere. Fonts loaded from Google Fonts here for zero-build.

   ============================== NIGHT DESK ==============================
   Concept: a precision trading instrument, not a generic dashboard.
   Carbon-black surfaces (near-neutral, no blue cast), hairline borders,
   ONE signal color — amber, the heritage color of market terminals —
   used only for "attention": active states, focus, brand, caution.
   P&L semantics stay green/red and are the only other saturated colors
   on screen, so profit/loss reads instantly from across the room.
   Type: Archivo (compact engineering grotesque) for UI; IBM Plex Mono
   for every number — tabular, unambiguous, terminal heritage.
   ======================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* Surfaces — layered carbon. Near-neutral (a breath of warmth, never
     blue-grey). Each step clearly lighter so insets and cards read. */
  --bg-0: #07080a;            /* page — carbon black */
  --bg-1: #0e1013;            /* card surface */
  --bg-2: #15181d;            /* inset fields, hover surface, row highlight */
  --bg-3: #1c2026;            /* raised hover, segmented-control active */
  --bg-header: rgba(9, 10, 12, 0.78);  /* glassy sticky header (blurred) */

  /* Borders — hairlines, not walls. */
  --border-subtle: #1d2127;   /* card edges, row separators */
  --border-strong: #2e343d;   /* focused inputs, active elements */

  /* Text. */
  --text-primary:   #eef0f3;  /* values, primary content */
  --text-secondary: #9aa1ad;  /* labels */
  --text-dim:       #5d6470;  /* captions, disabled, separators */

  /* THE signal color — terminal amber. Active, selected, focused, branded. */
  --accent: #f2b63d;
  --accent-strong: #f2b63d;   /* primary-action fill (login button) */
  --accent-hover: #ffca5e;
  --accent-bg: rgba(242, 182, 61, 0.10);
  --accent-glow: rgba(242, 182, 61, 0.35);

  /* P&L semantics — the only other saturated colors on screen. */
  --up:     #34d28b;          /* positive, long, fill */
  --dn:     #ff5f5f;          /* negative, short, reject, alarm */
  --warn:   #e3a43c;          /* caution, stale (amber family on purpose) */
  --info:   #58c4d4;          /* informational, modify states */

  /* Translucent semantic backgrounds for badges / banners. */
  --up-bg:   rgba(52, 210, 139, 0.10);
  --dn-bg:   rgba(255, 95, 95, 0.10);
  --warn-bg: rgba(227, 164, 60, 0.10);
  --info-bg: rgba(88, 196, 212, 0.10);

  /* Order-ticket BUY/SELL — confident fills, white text. */
  --btn-buy-bg:  #128a52;
  --btn-buy-bg-hover:  #16a261;
  --btn-sell-bg: #cc3a44;
  --btn-sell-bg-hover: #e0454f;

  /* Type scale. */
  --text-micro:   10.5px;     /* uppercase column headers, eyebrow labels */
  --text-caption: 12px;       /* secondary captions, field labels */
  --text-body:    13px;       /* table cells, account values */
  --text-emph:    14px;       /* inputs, tabs */
  --text-title:   12px;       /* panel titles — uppercase, letterspaced */
  --text-display: 27px;       /* tick-widget price, equity hero */

  /* Font families. JS reads --font-mono for the chart axis. */
  --font-sans: "Archivo", "Segoe UI", -apple-system, BlinkMacSystemFont,
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing scale — small steps for dense internals, large for page air. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 32px;

  /* Layout. */
  --page-max: 1720px;                       /* page never stretches past this */
  --page-pad: clamp(14px, 2.2vw, 32px);     /* responsive page gutters */
  --card-pad: 16px;                         /* card inner padding */
  --card-gap: 14px;                         /* gap between cards / columns */
  --header-h: 52px;

  /* Motion — numbers never animate; hovers + reveals only. */
  --motion-fast: 90ms ease-out;
  --motion-med:  160ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Border radii. */
  --radius-1: 5px;            /* chips, badges, inputs */
  --radius-2: 7px;            /* buttons */
  --radius-3: 10px;           /* cards */

  /* Elevation — soft, layered; cards float a hair above the page. The inset
     top hairline catches "light" so surfaces read as machined panels. */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                 0 1px 2px rgba(0, 0, 0, 0.45),
                 0 10px 28px -8px rgba(0, 0, 0, 0.50);
  --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                   0 8px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 24px 64px -12px rgba(0, 0, 0, 0.70);
}

/* Numeric utility — every price/lot/money/pip span gets .num. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Opt-out for the rare cases where proportional digits look better. */
.proportional-nums {
  font-variant-numeric: normal;
}

/* Semantic color helpers — paired with sign_class filter output. */
.up   { color: var(--up); }
.dn   { color: var(--dn); }
.dim  { color: var(--text-dim); }
.warn { color: var(--warn); }