/* Drones project — shared design tokens.
 *
 * Why this file exists (Designer explorer-trust panel 2026-06-01 CRITICAL):
 * the 10 dashboards drifted into two visual languages — firm_archetypes +
 * uas-platforms-explorer used JetBrains Mono / dark navy, while the 6
 * subsystem explorers used Segoe UI + Georgia + teal. A reader navigating
 * across them arrived in a different visual world with no wayfinding signal.
 *
 * Single source of truth: CSS custom properties for fonts, colors, spacing.
 * Every dashboard must reference this file. The regression guard
 * test_all_dashboards_reference_design_tokens enforces it.
 *
 * Color regime: muted earth-toned palette per project memory
 * (feedback_color_usage.md): "color encodes data not decoration; muted
 * earth tones; no neon; brightness only for interactive highlights."
 *
 * Region colors derived from the canonical FCC_REGION palette so they
 * round-trip with the Python region classifier in tools/canonical.py.
 */

:root {
  /* ─── Typography ────────────────────────────────────────────────────── */
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:  ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* Font sizing scale (dashboard prose) */
  --fs-micro:  7px;   /* tier-badge inner text, denominator chips */
  --fs-mini:   8px;   /* legend chips, table-cell metadata */
  --fs-xs:     9px;   /* filter labels, tooltip tier prose */
  --fs-sm:    10px;   /* body text in caveat panels, table cells */
  --fs-base:  11px;   /* default panel-prose */
  --fs-md:    12px;   /* body / page default */
  --fs-lg:    13px;   /* card headings */
  --fs-xl:    14px;   /* section headings */
  --fs-2xl:   18px;   /* page titles inside dashboards */

  /* ─── Core palette (navy / steel) ───────────────────────────────────── */
  --c-ink:        #1a365d;   /* primary text */
  --c-ink-soft:   #2d3748;   /* secondary text */
  --c-muted:      #4a5568;   /* tertiary text, caption */
  --c-faint:      #718096;   /* labels, axis ticks */
  --c-ghost:      #a0aec0;   /* placeholder, disabled */
  --c-paper:      #fff;
  --c-canvas:     #f7fafc;   /* subtle bg blocks */
  --c-rule:       #e2e8f0;   /* borders */
  --c-rule-soft:  #edf2f7;   /* table row separators */
  --c-accent:     #2b6cb0;   /* interactive blue, link */
  --c-accent-dim: #ebf8ff;   /* focused-row bg */

  /* ─── Region buckets (single source of truth) ───────────────────────── */
  /* These match the canonical region classification in tools/canonical.py.
     If you add a region, update both this file AND canonical.REGIONS. */
  --c-us:        #2b6cb0;
  --c-eu:        #805ad5;
  --c-allied:    #38a169;
  --c-adversary: #c53030;
  --c-other:     #718096;
  --c-unknown:   #a0aec0;

  /* ─── Triangulation tiers (single source of truth) ──────────────────── */
  /* Round-trip with TIER_DEF in firm_archetypes.html and tools/canonical.py.
     A=dual-source, B=trade-confirmed, C=AUVSI-only, none=no trade data. */
  --c-tier-a:    #319795;   /* teal — gold-standard dual-source */
  --c-tier-b:    #2b6cb0;   /* blue — trade-confirmed discoveries */
  --c-tier-c:    #d69e2e;   /* amber — AUVSI marketing only */
  --c-tier-none: #a0aec0;   /* grey — firm absent from trade dataset */

  /* ─── Semantic states ───────────────────────────────────────────────── */
  --c-warn:       #d69e2e;
  --c-warn-bg:    #fffaf0;
  --c-warn-text:  #92400e;
  --c-stale:      #d69e2e;   /* same as warn — staleness IS a warning */
  --c-stale-bg:   #fffaf0;
  --c-stale-text: #92400e;
  --c-error:      #c53030;
  --c-error-bg:   #fff5f5;
  --c-success:    #38a169;
  --c-success-bg: #f0fff4;
  --c-info:       #2b6cb0;
  --c-info-bg:    #ebf8ff;

  /* ─── Spacing scale ─────────────────────────────────────────────────── */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  32px;

  /* ─── Borders / radii ───────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;
  --radius-pill: 12px;
}

/* Optional: load the JetBrains Mono web font (used by the mono family).
 * Dashboards that want offline-clean operation can override --font-mono. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* Convenience utility — staleness banner used in any dashboard whose data
 * pipeline is behind the active extraction date. Use as:
 *   <div class="staleness-banner">⚠ Snapshot YYYY-MM-DD …</div> */
.staleness-banner {
  background: var(--c-stale-bg);
  border-bottom: 1px solid var(--c-stale);
  padding: 10px 32px;
  font-size: var(--fs-base);
  color: var(--c-stale-text);
  line-height: 1.5;
  font-family: var(--font-mono);
}
.staleness-banner strong { font-weight: 600; }