/* ============================================================
   MeridianPoint Design System — Tokens
   Colors, type, spacing, radii, shadows, borders.

   Anchors lifted from services/pipeline/stages/pdf_generation.py
   (the real report renderer) so that screen UI stays visually
   continuous with delivered client artifacts.
   ============================================================ */

/* Geist + Geist Mono — engineered, neutral, precise.
   Self-host preferred; CDN fallback below for early prototyping. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand ---------- */
  --mp-navy-900: #0a1d2e; /* deepest, headers on dark surfaces */
  --mp-navy-800: #0f2236;
  --mp-navy-700: #12324a; /* PRIMARY — wordmark, mark, accents (from report.css) */
  --mp-navy-600: #1c4666;
  --mp-navy-500: #2a5d83;
  --mp-navy-400: #4a7ea5;
  --mp-navy-300: #84a8c5;
  --mp-navy-200: #c5d6e3;
  --mp-navy-100: #e6edf3;
  --mp-navy-050: #f1f5f9;

  /* ---------- Neutrals (slate) ----------
     Slate scale aligned to existing report stylesheet:
     #17202a body, #475569/#64748b muted, #cbd5e1/#d8e0ea borders. */
  --mp-slate-950: #0b0f14;
  --mp-slate-900: #0f172a;
  --mp-slate-800: #17202a;
  --mp-slate-700: #334155;
  --mp-slate-600: #475569;
  --mp-slate-500: #64748b;
  --mp-slate-400: #94a3b8;
  --mp-slate-300: #cbd5e1;
  --mp-slate-250: #d8e0ea; /* report-canonical border */
  --mp-slate-200: #e2e8f0;
  --mp-slate-150: #eef3f8; /* report-canonical table header */
  --mp-slate-100: #f1f5f9;
  --mp-slate-075: #f8fafc; /* report-canonical surface */
  --mp-slate-050: #fbfdff; /* report-canonical inset */
  --mp-paper:     #ffffff;

  /* ---------- Semantic ----------
     Restrained, never saturated. Used for status, not decoration. */
  --mp-success-700: #1f6b46;
  --mp-success-500: #2f8f5e;
  --mp-success-100: #e6f2ec;

  --mp-warn-700: #8a5a07;
  --mp-warn-500: #b07a16;
  --mp-warn-100: #f8efd9;

  --mp-danger-700: #8a2727;
  --mp-danger-500: #b13a3a;
  --mp-danger-100: #f5e1e1;

  --mp-info-700: #1c4666;
  --mp-info-500: #2a6a99;
  --mp-info-100: #e3eef6;

  /* ---------- Attention levels (product-specific) ----------
     The product avoids "high/moderate risk" — uses
     attention/priority labels per REPORT_STRUCTURE_GUIDE.md.
     Color is muted, label is mandatory. */
  --mp-attn-primary: #12324a;
  --mp-attn-elevated: #8a5a07;
  --mp-attn-routine: #475569;
  --mp-attn-info: #2a6a99;

  /* ---------- Source-basis tints ----------
     Each evidence origin has a stable, restrained accent. */
  --mp-basis-source:     #12324a; /* source report extraction */
  --mp-basis-enrichment: #2a6a99; /* FEMA / NOAA / Mapbox */
  --mp-basis-ai:         #5b3a8a; /* AI synthesis — only purple usage */
  --mp-basis-deterministic: #1f6b46; /* deterministic rule */

  /* ---------- Foreground / background aliases ---------- */
  --mp-fg-1: var(--mp-slate-900); /* primary text */
  --mp-fg-2: var(--mp-slate-800); /* body / report */
  --mp-fg-3: var(--mp-slate-700); /* secondary */
  --mp-fg-4: var(--mp-slate-600); /* muted */
  --mp-fg-5: var(--mp-slate-500); /* meta / caption */
  --mp-fg-accent: var(--mp-navy-700);
  --mp-fg-on-dark: #e6edf3;

  --mp-bg-0: var(--mp-paper);       /* page */
  --mp-bg-1: var(--mp-slate-050);   /* surface inset */
  --mp-bg-2: var(--mp-slate-075);   /* secondary surface */
  --mp-bg-3: var(--mp-slate-150);   /* table head, chip */
  --mp-bg-dark: var(--mp-slate-900);

  --mp-border-1: var(--mp-slate-300);   /* default */
  --mp-border-2: var(--mp-slate-250);   /* report-default */
  --mp-border-3: var(--mp-slate-200);   /* low-emphasis */
  --mp-border-strong: var(--mp-slate-400);
  --mp-border-accent: var(--mp-navy-700);

  /* ---------- Typography ---------- */
  --mp-font-sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mp-font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --mp-font-display: "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — desktop-first, dense.
     Sizes are rems; base 16px. */
  --mp-text-2xs: 0.6875rem;   /* 11 — micro labels, table footnote */
  --mp-text-xs:  0.75rem;     /* 12 — meta, captions, badges */
  --mp-text-sm:  0.8125rem;   /* 13 — dense table body */
  --mp-text-base: 0.875rem;   /* 14 — UI default */
  --mp-text-md:  0.9375rem;   /* 15 — paragraph body */
  --mp-text-lg:  1.0625rem;   /* 17 — section heading */
  --mp-text-xl:  1.25rem;     /* 20 — panel title */
  --mp-text-2xl: 1.5rem;      /* 24 — page title */
  --mp-text-3xl: 1.875rem;    /* 30 — report H1 */
  --mp-text-4xl: 2.375rem;    /* 38 — display */
  --mp-text-5xl: 3rem;        /* 48 — marketing display */

  --mp-leading-tight: 1.18;
  --mp-leading-snug: 1.32;
  --mp-leading-normal: 1.48;
  --mp-leading-relaxed: 1.6;

  --mp-tracking-tight: -0.012em;
  --mp-tracking-normal: 0;
  --mp-tracking-wide: 0.04em;
  --mp-tracking-caps: 0.08em;

  --mp-weight-regular: 400;
  --mp-weight-medium: 500;
  --mp-weight-semibold: 600;
  --mp-weight-bold: 700;

  /* ---------- Spacing — 4px base ---------- */
  --mp-space-0: 0;
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;
  --mp-space-10: 40px;
  --mp-space-12: 48px;
  --mp-space-16: 64px;
  --mp-space-20: 80px;

  /* Layout */
  --mp-rail-w: 248px;       /* primary nav rail */
  --mp-rail-w-collapsed: 56px;
  --mp-inspector-w: 360px;  /* right panel */
  --mp-topbar-h: 48px;
  --mp-statusbar-h: 28px;

  /* ---------- Radii — restrained ---------- */
  --mp-radius-0: 0;
  --mp-radius-1: 2px;       /* chips, inputs, table cells */
  --mp-radius-2: 4px;       /* default surface */
  --mp-radius-3: 6px;       /* cards */
  --mp-radius-4: 8px;       /* dialogs, popovers */
  --mp-radius-full: 999px;

  /* ---------- Borders ---------- */
  --mp-stroke-1: 1px solid var(--mp-border-2);
  --mp-stroke-strong: 1px solid var(--mp-border-strong);
  --mp-stroke-accent: 1px solid var(--mp-border-accent);
  --mp-stroke-rule: 1px solid var(--mp-border-3);

  /* ---------- Shadows — soft, low-elevation. No glow. ---------- */
  --mp-shadow-0: none;
  --mp-shadow-1: 0 1px 0 0 rgba(15, 23, 42, 0.04),
                 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --mp-shadow-2: 0 1px 2px 0 rgba(15, 23, 42, 0.06),
                 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  --mp-shadow-3: 0 4px 24px -8px rgba(15, 23, 42, 0.16),
                 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --mp-shadow-popover: 0 12px 32px -12px rgba(15, 23, 42, 0.24),
                       0 2px 6px -2px rgba(15, 23, 42, 0.10);
  --mp-shadow-inset: inset 0 0 0 1px var(--mp-border-3);
  --mp-focus-ring: 0 0 0 2px var(--mp-paper),
                   0 0 0 4px var(--mp-navy-500);

  /* ---------- Motion ---------- */
  --mp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --mp-dur-1: 120ms;  /* hover, focus */
  --mp-dur-2: 180ms;  /* panel, menu */
  --mp-dur-3: 260ms;  /* page transition */

  /* ---------- Z-index ---------- */
  --mp-z-base: 1;
  --mp-z-elevated: 10;
  --mp-z-sticky: 100;
  --mp-z-overlay: 1000;
  --mp-z-modal: 1100;
  --mp-z-toast: 1200;
}

/* ============================================================
   Semantic element styles — useful as a baseline.
   Apply by adding .mp-doc or .mp-ui to a wrapper.
   ============================================================ */

.mp-ui {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-text-base);
  line-height: var(--mp-leading-normal);
  color: var(--mp-fg-1);
  background: var(--mp-bg-0);
  font-feature-settings: "ss01", "cv11", "tnum"; /* tabular nums on */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mp-ui h1, .mp-doc h1 {
  font-family: var(--mp-font-display);
  font-size: var(--mp-text-3xl);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
  letter-spacing: var(--mp-tracking-tight);
  color: var(--mp-slate-900);
  margin: 0 0 var(--mp-space-3);
}

.mp-ui h2, .mp-doc h2 {
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-weight-semibold);
  line-height: var(--mp-leading-snug);
  letter-spacing: var(--mp-tracking-tight);
  color: var(--mp-navy-700);
  margin: 0 0 var(--mp-space-2);
}

.mp-ui h3, .mp-doc h3 {
  font-size: var(--mp-text-lg);
  font-weight: var(--mp-weight-semibold);
  line-height: var(--mp-leading-snug);
  color: var(--mp-slate-800);
  margin: 0 0 var(--mp-space-2);
}

.mp-ui h4 {
  font-size: var(--mp-text-base);
  font-weight: var(--mp-weight-semibold);
  color: var(--mp-slate-700);
  margin: 0 0 var(--mp-space-1);
}

.mp-ui .mp-eyebrow,
.mp-doc .mp-eyebrow {
  font-size: var(--mp-text-2xs);
  font-weight: var(--mp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-caps);
  color: var(--mp-slate-500);
}

.mp-ui p, .mp-doc p {
  margin: 0 0 var(--mp-space-3);
  color: var(--mp-fg-2);
  text-wrap: pretty;
}

.mp-ui code, .mp-ui kbd,
.mp-doc code {
  font-family: var(--mp-font-mono);
  font-size: 0.92em;
  background: var(--mp-slate-075);
  border: 1px solid var(--mp-border-3);
  border-radius: var(--mp-radius-1);
  padding: 1px 5px;
  color: var(--mp-slate-800);
}

.mp-ui .mp-data, .mp-doc .mp-data {
  font-family: var(--mp-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

.mp-ui a, .mp-doc a {
  color: var(--mp-navy-700);
  text-decoration: none;
  border-bottom: 1px solid var(--mp-navy-200);
  transition: color var(--mp-dur-1) var(--mp-ease-out),
              border-color var(--mp-dur-1) var(--mp-ease-out);
}
.mp-ui a:hover, .mp-doc a:hover {
  color: var(--mp-navy-600);
  border-bottom-color: var(--mp-navy-500);
}

/* Selection */
.mp-ui ::selection, .mp-doc ::selection {
  background: var(--mp-navy-100);
  color: var(--mp-navy-900);
}