/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: dark;

  /* Surfaces, back to front. */
  --bg: #0b0f14;
  --surface-inset: #0e131b;
  --panel: #121821;
  --surface-overlay: #1a2230;

  /* Text, loudest to quietest. Pick by how much attention the text should
     pull, not by how grey it looks: ink for values, soft for supporting
     copy, mute for labels, faint for anything the eye should skip. */
  --ink: #e8eef5;
  --ink-soft: #c3cedb;
  --ink-mute: #8b98a8;
  --ink-faint: #66717f;

  /* Rules, quietest to loudest. */
  --hairline-ghost: #1a2331;
  --hairline: #243041;
  --hairline-strong: #33445c;

  /* Direction. Desaturated on purpose — a wall of pure #0f0/#f00 reads as
     a casino, and these still clear AA on every surface above. */
  --gain: #55c98d;
  --gain-soft: #86dcb0;
  --loss: #e8776d;
  --loss-soft: #f2a49c;

  --accent: #8ec5ff;
  --alert: #f59e0b;

  /* Status. Distinct from gain/loss on purpose: a failed form and a falling
     price are not the same event, and tying them to one token means retuning
     the market colors would restyle every error message. */
  --success: #86efac;
  --success-strong: #22c55e;
  --success-hover: #16a34a;
  --danger: #fca5a5;
  --danger-strong: #dc2626;
  --danger-deep: #7f1d1d;
  --warning: #fbbf24;
  --warning-soft: #fcd34d;

  /* Text drawn on top of a filled accent/status surface. Inverts per theme —
     dark ink on a light button, light ink on a dark one. */
  --on-accent: #061018;
  --on-success: #04140a;
  --on-warning: #111827;
  --on-warning-soft: #fff7ed;

  /* Chrome surfaces. Previously derived with color-mix(..., black), which only
     darkens — meaningless on a light background. Each theme states its own. */
  --chrome-bg: #0a0e13;
  --field-bg: #0f1419;
  --field-placeholder: #6b7787;

  /* Panel derivatives, split by intent rather than by depth.
     RAISED surfaces are cards that sit above the page; INSET surfaces are
     fields and controls that sit below their container. On a dark theme both
     happen to be darker than --panel, which is why they were all written as
     one "mix with black" — but on light they move in opposite directions, so
     the distinction has to be explicit.
     Dark keeps the original expressions, so its appearance is unchanged. */
  --panel-raised: color-mix(in srgb, var(--panel) 92%, black);
  --panel-raised-deep: color-mix(in srgb, var(--panel) 72%, black);
  --panel-inset: color-mix(in srgb, var(--panel) 88%, black);
  --panel-inset-deep: color-mix(in srgb, var(--panel) 80%, black);
  --panel-scrim: color-mix(in srgb, var(--panel) 55%, black);

  /* Chart theme. Read by chart_theme.js at runtime rather than hardcoded in
     the controllers, so a theme swap only has to touch this block. Grid and
     crosshair are alpha rather than solid so they compose over any surface —
     that is what lets one value serve both themes. */
  --chart-surface: #0f1419;
  --chart-axis-text: #c8d0d8;
  --chart-border: #2a3441;
  --grid-line: rgba(214, 226, 240, 0.055);
  --chart-crosshair: rgba(148, 163, 184, 0.75);
  --chart-overlay: #94a3b8;
  --chart-ma50: #a78bfa;
  --chart-level: #64748b;
  --chart-band-fallback: #6b7280;
  --chart-alert: #f59e0b;
  --chart-alert-pending: #fbbf24;

  /* Per-ticker identity. Same hue wherever a symbol needs to be recognized at
     a glance across widgets — a watchlist row's swatch, the compare picker's
     chip/popover dot, and that ticker's line + tooltip key once it's overlaid
     on the price chart (see ticker_identity_slot in application_helper.rb and
     its JS mirror in compare_tickers_controller.js). Four hues, chosen to sit
     clear of the meaning-bearing colors above — gain/loss/accent/warning/
     ma50 already claim most of the wheel — and checked with the dataviz
     skill's CVD-simulated validator (protan/deutan ΔE, normal-vision floor,
     contrast) against this exact surface, not eyeballed. */
  --ticker-1: #008e84;
  --ticker-2: #a90095;
  --ticker-3: #194fe3;
  --ticker-4: #546700;

  --font: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Aliases kept so existing rules resolve unchanged. */
  --text: var(--ink);
  --muted: var(--ink-mute);
  --border: var(--hairline);

  /* Chrome geometry. These used to be one value doing two jobs — the bar's
     height and the global content offset — which is why the bar had to double
     in height on narrow screens to fit navigation. Navigation now lives in the
     rail, so the bar keeps a single row at every width. */
  /* Shared content cap for the bar, the chart grid, and the page footer, so
     the three stay aligned. Was 1600px, which discarded ~900px on a 2560px
     display and made collapsing the rail a no-op at anything above 1920px —
     the cap simply absorbed the width the rail gave back. Charts want width;
     this is the knob to turn if they ever look too stretched. */
  --shell-max: 2400px;

  --bar-height: 2.85rem;
  --rail-width: 8.5rem;
  /* Only non-zero below the rail breakpoint, where the rail lies down into a
     horizontal strip under the bar. */
  --rail-strip-height: 0rem;
  --scout-drawer-width: 24rem;
}