/* Posteros SDP Viewer — shared design tokens (agent.md §8).
 *
 * Single source of truth for palette, typography, and the QC-verdict / evidence
 * tier color maps. Linked by the authoring UI (index.html, viewer.html) and
 * inlined verbatim into the exported client HTML (Phase 7) so both surfaces
 * render identically to the Fintepla SDP reference.
 *
 * Font FILES are loaded per-context (the authoring UI links a web-font CDN; the
 * export embeds/falls back) — this file only declares the families + fallbacks,
 * so it stays self-contained and safe to inline into a file:// export.
 */

:root {
  /* Surfaces & ink */
  --paper: #f4f2ec; /* warm parchment — page background */
  --paper-2: #faf8f3; /* slightly lighter — card surfaces */
  --surface: #ffffff; /* white panels */
  --ink: #1c1838; /* dark indigo — primary text */
  --ink-soft: #3c3856; /* secondary text */
  --muted: #6f6b80; /* tertiary / labels */
  --muted-2: #9c98aa; /* disabled / placeholders */
  --rule: #d9d4c7; /* dividers */
  --rule-soft: #e8e3d6; /* subtle dividers */

  /* Accents */
  --indigo: #4b3fa0; /* primary accent */
  --teal: #2f8f86; /* secondary accent / supported */
  --violet: #6d5ae0; /* tertiary accent */
  --amber: #9c6b12; /* warning / attention */
  --rust: #b5543a; /* error / critical */

  /* Type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radii, elevation, layout */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(28, 24, 56, 0.06), 0 1px 3px rgba(28, 24, 56, 0.08);
  --shadow-2: 0 4px 12px rgba(28, 24, 56, 0.1);
  --nav-w: 220px;
  --content-max: 780px;
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.25;
  font-weight: 500;
}
a { color: var(--indigo); }
code, .mono { font-family: var(--mono); }
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
/* SDP synthesis (Layer 2) container — visually distinct from pipeline prose. */
.sdp-layer {
  background: var(--paper-2);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
}

/* ------------------------------------------------------------------ *
 * Badges — QC verdict & evidence tier color maps (§8, design prompt).
 * Consumers set data-* attributes; CSS resolves the color. This keeps the
 * mapping in one place instead of duplicated in JS.
 * ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: 999px;
  border: 1px solid var(--badge-color, var(--rule));
  color: var(--badge-color, var(--muted));
  background: color-mix(in srgb, var(--badge-color, var(--muted)) 10%, transparent);
}
/* Solid variant (filled) for tier chips */
.badge--solid {
  color: var(--surface);
  background: var(--badge-color, var(--muted));
  border-color: var(--badge-color, var(--muted));
}

/* QC verdict → color */
[data-qc-verdict='KEEP AS IS'] { --badge-color: var(--teal); }
[data-qc-verdict='REWRITE REQUIRED'] { --badge-color: var(--rust); }
[data-qc-verdict='FLAG FOR REVIEW'] { --badge-color: var(--amber); }
[data-qc-verdict='REWRITE WITH QUALIFIERS'] { --badge-color: var(--amber); }
/* null / PENDING fall back to --rule via the .badge defaults */

/* Sentence support level → left-border tint (evidence lens) */
[data-support='Strongly Supported'],
[data-support='Fully Supported'] { --support-color: var(--teal); }
[data-support='Partially Supported'] { --support-color: var(--amber); }
[data-support='Not Supported'] { --support-color: var(--rust); }
.support-marked { border-left: 3px solid var(--support-color, var(--rule)); padding-left: var(--sp-3); }

/* Evidence tier badge colors. Authoritative map: docs/design-system.md
 * (extends agent.md §8 to cover the scientific_tier codes actually present in
 * the pipeline data). Unlisted tiers fall back to --muted via the .badge
 * default. Change colors in docs/design-system.md and here together. */
[data-sci-tier='TIER_1_PIVOTAL_RCT'],
[data-sci-tier='TIER_1_HIGH_EVIDENCE'] { --badge-color: var(--indigo); }
[data-sci-tier='TIER_2_CLINICAL_CONSENSUS'] { --badge-color: var(--teal); }
[data-sci-tier='TIER_3_MODERATE_EVIDENCE'] { --badge-color: var(--violet); }
[data-sci-tier='TIER_4_LOW_EVIDENCE'] { --badge-color: var(--amber); }
[data-sci-tier='TIER_5_VERY_LOW_EVIDENCE'] { --badge-color: var(--muted); }

[data-strat-tier='TIER_1_MARKET_SHAPER'] { --badge-color: var(--violet); }

/* Citation chip (superscript) — rendered for [EVnnnnn] tokens */
.cite {
  font-family: var(--mono); /* §8/§7.3: JetBrains Mono for citation tokens */
  font-size: 0.7em;
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
  vertical-align: super;
  line-height: 0;
  padding: 0 1px;
}
.cite:hover { text-decoration: underline; }