/* =============================================================================
   StocksMD — Canonical Design-Token Layer  (tokens.css)
   -----------------------------------------------------------------------------
   The single source of truth for the StocksMD Design_System.

   This file contains ONLY:
     1. Font imports (Roboto + IBM Plex Mono)
     2. Design_Token custom-property declarations on :root
     3. Legacy aliases (bound to semantic tokens) for in-flight migration
     4. The global :focus-visible ring and the global tabular-nums numeric rule

   It contains NO component styling — components live in components.css.
   Loaded by base.html BEFORE components.css and styles.css so every page
   (legacy, screener, landing) inherits one canonical set of values.

   Canonical values come from the ui-ux-consistency-polish design Data Models
   table. Conflicting historical values (screener #07172a, logo #27AE60,
   screener bull #2ecc71, legacy #e74c3c/#dc2626) are retired here.
   Spec: .kiro/specs/ui-ux-consistency-polish  (Req 1.1, 1.2, 2.1, 7.3, 8.1)
   ============================================================================= */

/* ── Font imports ────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────────
     Reconciles screener #07172a vs brand/landing #07111F -> brand north-star. */
  --bg-base: #07111F;       /* deep navy app background (brand north-star)     */
  --bg-surface: #101B2D;    /* standard card / panel surface                   */
  --bg-surface-2: #152238;  /* elevated surface                                */
  --bg-surface-3: #1B2C46;  /* highest elevation (dropdowns, popovers)         */
  --bg-hover: #1D4470;      /* row / interactive hover                         */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-disabled: #64748B;

  /* ── Semantic status colors ───────────────────────────────────────────────
     Exactly one Status_Meaning per token (Req 2.1). Names are meaning-based
     (healthy/caution/risk/neutral/info), never market jargon (bull/bear).
     *-soft variants are rgba(...,0.14) tints for chip / tile backgrounds.     */
  --status-healthy: #22C55E;   /* Healthy       (brand healthy green)          */
  --status-caution: #F59E0B;   /* Caution       (brand amber)                 */
  --status-risk: #EF4444;      /* Risk          (brand red, used sparingly)   */
  --status-neutral: #94A3B8;   /* Neutral / no defined meaning (muted slate)  */
  --status-info: #22D3EE;      /* Informational (brand accent cyan)           */

  --status-healthy-soft: rgba(34, 197, 94, 0.14);
  --status-caution-soft: rgba(245, 158, 11, 0.14);
  --status-risk-soft: rgba(239, 68, 68, 0.14);
  --status-neutral-soft: rgba(148, 163, 184, 0.14);
  --status-info-soft: rgba(34, 211, 238, 0.14);

  /* ── Health-zone aliases (bound to semantic, NOT new colors) ────────────── */
  --zone-buy: var(--status-healthy);
  --zone-hold: var(--status-caution);
  --zone-sell: var(--status-risk);

  /* ── Accent ───────────────────────────────────────────────────────────── */
  --accent-cyan: var(--status-info);

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Spacing (4px base scale) ─────────────────────────────────────────────
     Canonical scale per design: 4, 8, 12, 16, 20, 24, —, 32px.
     --space-7 is intentionally omitted (dash in the canonical table).         */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-ui: "Roboto", system-ui, sans-serif;
  --font-ticker: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Shared Type_Scale: 13, 14, 16, 18, 22, 26px */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;   /* base body size */
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 26px;

  /* Type weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Focus ────────────────────────────────────────────────────────────── */
  --focus-ring: 2px solid var(--status-info);

  /* ── Legacy aliases (bound to semantic tokens) ─────────────────────────────
     Keep screener.css / styles.css rules working during migration. These map
     retired market-jargon names onto the canonical semantic tokens so no page
     breaks before it is individually migrated.                               */
  --color-bull: var(--status-healthy);
  --color-bear: var(--status-risk);
  --color-neutral: var(--status-caution);
  --color-info: var(--status-info);
}

/* ── Global focus-visible ring (Req 7.3) ───────────────────────────────────── */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ── Global tabular-nums numeric rule (Req 8.1) ─────────────────────────────
   Numeric_Values render with fixed-width figures for reliable alignment and
   comparison across pages. Applied broadly (digits only are affected) plus a
   utility class for explicit opt-in on individual elements.                   */
body {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.tabular-nums,
table td,
table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}