/* ================================================================
   PRISM — Shared Design Tokens (v3.2 · editorial/instrument)
   Single source of truth for colors, typography, buttons.
   Imported on every template via _seo_head.html.
   ================================================================ */

:root {
  /* ─── Editorial palette ──────────────────────────────────────── */
  --prism-ink:        #0B1B33;    /* primary deep navy */
  --prism-ink-2:      #14294A;    /* navy lighter */
  --prism-ink-3:      #24385C;    /* navy lightest */

  --prism-paper:      #F5F0E6;    /* warm cream (used on landing + editorial pages) */
  --prism-paper-2:    #EDE6D6;
  --prism-paper-3:    #E2D9C5;

  --prism-rule:        rgba(11,27,51,0.14);
  --prism-rule-strong: rgba(11,27,51,0.32);
  --prism-muted:       #4A5972;
  --prism-muted-2:     #6B7A93;

  --prism-accent:    #C8531C;     /* clay — primary accent */
  --prism-accent-2:  #E8A838;     /* saffron — data highlights */

  /* Data colors (standardised across charts) */
  --prism-data-red:  #B23A3A;     /* critical / conflict */
  --prism-data-blue: #1E4DA1;     /* funding / FTS */
  --prism-data-teal: #2E7A73;     /* positive / growth */

  /* ─── Legacy blue aliases (for pages that still use the old palette) ─ */
  /* Old tokens in nav.css etc. continue to work — these aliases keep
     backward compatibility as the rest of the app migrates. */
  --prism-blue:       #1e40af;
  --prism-blue-light: #3b82f6;

  /* ─── Typography ─────────────────────────────────────────────── */
  --prism-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --prism-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --prism-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Radii + misc ───────────────────────────────────────────── */
  --prism-radius-sm: 6px;
  --prism-radius-md: 10px;
  --prism-radius-lg: 16px;
  --prism-maxw: 1240px;
}

/* ────────────────────────────────────────────────────────────────
   Global editorial typography — applied to every page.
   - h1/h2 use Source Serif 4 for editorial weight
   - h3-h6 + body stay Inter
   - Data labels (class 'mono') use JetBrains Mono
   Pages that need custom headline treatment can override locally.
   ──────────────────────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--prism-serif);
  font-weight: 600;
  letter-spacing: -0.012em;
}
h1 { line-height: 1.02; letter-spacing: -0.018em; }
h2 { line-height: 1.06; letter-spacing: -0.014em; }

.prism-serif { font-family: var(--prism-serif) !important; }
.prism-sans  { font-family: var(--prism-sans)  !important; }
.prism-mono  { font-family: var(--prism-mono)  !important; }
.prism-italic { font-style: italic; }

/* Accent italic — the PRISM editorial flourish */
.prism-accent-italic {
  font-family: var(--prism-serif);
  font-style: italic;
  color: var(--prism-accent);
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────────
   Unified buttons
   Use .prism-btn + variant class. Three intents:
     .prism-btn-primary  — filled dark ink
     .prism-btn-accent   — filled clay (CTAs only, scarcity matters)
     .prism-btn-ghost    — outlined, for secondary actions
   Sizes: default + .prism-btn-lg + .prism-btn-sm
   ──────────────────────────────────────────────────────────────── */
.prism-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--prism-radius-sm);
  font-family: var(--prism-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.prism-btn-primary { background: var(--prism-ink); color: var(--prism-paper); border-color: var(--prism-ink); }
.prism-btn-primary:hover { background: var(--prism-ink-2); border-color: var(--prism-ink-2); }

.prism-btn-accent { background: var(--prism-accent); color: #fff; border-color: var(--prism-accent); }
.prism-btn-accent:hover { background: #a8430f; border-color: #a8430f; color: #fff; }

.prism-btn-ghost { color: var(--prism-ink); background: transparent; border-color: var(--prism-rule-strong); }
.prism-btn-ghost:hover { background: var(--prism-ink); color: var(--prism-paper); border-color: var(--prism-ink); }

.prism-btn-lg { padding: 13px 24px; font-size: 15px; }
.prism-btn-sm { padding: 6px 12px; font-size: 13px; }

.prism-btn-arrow { transition: transform 0.18s; }
.prism-btn:hover .prism-btn-arrow { transform: translate(3px, 0); }

/* ────────────────────────────────────────────────────────────────
   Editorial small bits — eyebrow label, rule, etc.
   ──────────────────────────────────────────────────────────────── */
.prism-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--prism-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--prism-muted);
}
.prism-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--prism-accent);
}

/* ────────────────────────────────────────────────────────────────
   Navy unification — overrides legacy blue-gradient dashboard
   headers + stat-card accents across all templates. Uses !important
   deliberately to beat per-template inline <style> blocks; this is
   the narrow migration hammer for this one pass. Future per-template
   rewrites can replace these overrides with clean native rules.
   ──────────────────────────────────────────────────────────────── */
body .dashboard-header {
  background: #ffffff !important;
  box-shadow: 0 1px 8px rgba(11, 27, 51, 0.06) !important;
}
body .dashboard-header::after {
  background: var(--prism-ink, #0B1B33) !important;
  opacity: 0.9 !important;
}
body .stat-card::before {
  background: var(--prism-ink, #0B1B33) !important;
}
body .stat-card::after {
  background: var(--prism-ink, #0B1B33) !important;
}
/* Data-table headers — navy solid */
body .data-table th {
  background: var(--prism-ink, #0B1B33) !important;
  color: var(--prism-paper, #F5F0E6) !important;
}
/* Primary buttons — solid ink */
body .btn-primary {
  background: var(--prism-ink, #0B1B33) !important;
  color: var(--prism-paper, #F5F0E6) !important;
  box-shadow: 0 2px 8px rgba(11, 27, 51, 0.18) !important;
}
body .btn-primary:hover {
  background: var(--prism-ink-2, #14294A) !important;
  box-shadow: 0 6px 20px rgba(11, 27, 51, 0.28) !important;
}