/* Railfan Radar design tokens: LOCKED 2026-09-29. Rules live in DESIGN_STANDARDS.md.
   Load this before all other styles. Components may only reference these variables.
   Railroad theme vars (--rr, --rr-2, --rr-ink, --rr-text, --rr-wash, --rr-soft, --rr-card,
   --rr-border) are set at runtime per railroad and are not defined here. */

:root {
  /* Neutrals (unchanged from existing site) */
  --bg: #eef2f5;
  --surface: #ffffff;
  --surface-2: #e4eaee;
  --ink: #1c2b33;
  --ink-soft: #57676f;
  --ink-faint: #8698a1;
  --line: #c3cdd3;
  --line-strong: #9fadb5;

  /* Call-to-action blue: the only blue */
  --cta: #487ABA;
  --cta-text: #487ABA;
  --cta-ink: #ffffff;
  --accent: var(--cta);          /* legacy alias */
  --accent-ink: var(--cta-ink);  /* legacy alias */

  /* Status (signal-style). *-fill = solid shapes (white --cta-ink text on it,
     never on --warn-fill); plain = text on the matching *-bg tint. */
  --good: #1B7A3D;    --good-bg: #DFF3E6;
  --bad: #C62828;     --bad-bg: #FBE2E0;
  --warn: #A86A00;    --warn-bg: #FDF0CF;
  --pending: #5D6B73; --pending-bg: #E4E9EC;
  --good-fill: var(--good);
  --bad-fill: var(--bad);
  --warn-fill: var(--warn);

  /* Brand */
  --brand-green: #48A878;  /* sampled from logo; header stat numbers, Moderation title, account charts */

  /* Map paint (MapLibre reads these via getComputedStyle and re-applies on theme toggle) */
  --map-label: #1c2b33;
  --map-halo: #ffffff;
  --map-building: #cbd3d9;
  --map-building-shadow: rgba(28, 43, 51, 0.25);
  --map-service-track: var(--ink);
  --map-yard-label: var(--map-label);
  --map-symbol-stroke: #5b6870;
  --map-bridge-deck: #5f7482;
  --map-structure: #2b3440;

  /* Charts: one brand-green sequential ramp (0 = empty/lowest) */
  --chart-0: #e3f2ea;
  --chart-1: #b5dfc6;
  --chart-2: #7cc49c;
  --chart-3: #48A878;
  --chart-4: #2d7a52;
  --chart-alt: #6b7b84;    /* secondary series (webcam) */

  /* Image lightbox: ALWAYS dark in both themes on purpose. Never override per theme. */
  --lightbox-bg: rgba(3, 8, 12, .92);
  --lightbox-ink: #e8eef2;
  --lightbox-control-bg: rgba(255, 255, 255, .12);

  /* Pins (railroad infrastructure + locomotives use railroad colors at runtime) */
  --pin-hotspot: #E5302A;
  --pin-railfan-place: #22B35E;

  /* Railroad fallback when none is active */
  --rr-fallback: var(--cta);

  /* Typography */
  --font-display: "A Love of Thunder", "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: Helvetica, Arial, sans-serif;
  --fs-micro: 11px;
  --fs-meta: 12px;
  --fs-ui: 13px;
  --fs-body: 14px;
  --fs-input: 16px;
  --fs-panel-title: 20px;
  --fs-page-title: 28px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --label-tracking: 0.06em;

  /* Shape */
  --radius: 6px;
  --radius-round: 50%;   /* floating map controls, close-X, avatars, dots only */
  --radius-tiny: 2px;    /* elements under 16px on both sides (heatmap cells, swatches) */

  /* Elevation */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .14);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .26);
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--cta) 45%, transparent);

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Sizes */
  --h-btn: 36px;
  --h-btn-compact: 28px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

:root[data-theme="dark"] {
  /* Neutrals: one dark set for every page (the map's values). Pages never redefine these. */
  --bg: #12181c;
  --surface: #1b232a;
  --surface-2: #212b32;
  --ink: #e7edf1;
  --ink-soft: #9fb0ba;
  --ink-faint: #6b7b84;
  --line: #2c3941;
  --line-strong: #44545e;

  /* Status: fill and text split in dark mode */
  --good-fill: #1F8A4C; --good: #5FD08A; --good-bg: #15301F;
  --bad-fill: #C73A2E;  --bad: #FF8A7E;  --bad-bg: #3A1D1B;
  --warn-fill: #B77A00; --warn: #F2B544; --warn-bg: #3A2D10;
  --pending: #9aa7ad;   --pending-bg: #232d33;

  /* Map paint */
  --map-label: #e6edf1;
  --map-halo: #12181c;
  --map-building: #36424c;
  --map-building-shadow: rgba(0, 0, 0, 0.4);
  --map-service-track: var(--ink-soft);
  --map-symbol-stroke: #0e1316;
  --map-bridge-deck: #5f7482;
  --map-structure: #c9d1d9;

  /* Charts */
  --chart-0: #1e2a24;
  --chart-1: #1f4a34;
  --chart-2: #2b7050;
  --chart-3: #48A878;
  --chart-4: #86d3a8;

  --cta: #5A8BCB;
  --cta-text: #7FA6D8;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .40);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .55);
}

/* Global enforcement helpers */
body, .maplibregl-ctrl, .maplibregl-ctrl-attrib, .leaflet-container,
.community-pin.signal .signal-marker-label { font-family: var(--font-body); }
.num, .stat-val, .votes, [data-numeric] { font-variant-numeric: tabular-nums; }
input, select, textarea { font-size: var(--fs-input); font-family: var(--font-body); }