/* wpnews — Console direction (Phase 67, 2026-05-20).
   Terminal-as-website. JetBrains Mono. Warm-dark surfaces.
   Accent swappable via [data-accent]. Density via [data-density].
   Replaces Phase 64 editorial tokens. */

:root {
  /* Warm-charcoal palette */
  --bg: #0e0f0c;
  --bg-2: #15160f;
  --bg-3: #1d1e16;
  --bg-4: #262720;
  --fg: #d8d3c3;
  --fg-2: #a09a87;
  --fg-3: #6a6557;
  --fg-4: #4a4639;
  --rule: #2a2b22;
  --rule-2: #3a3b2f;

  /* Accent — amber phosphor by default */
  --accent: #f4a83a;
  --accent-2: #c47a18;
  --accent-soft: rgba(244, 168, 58, 0.10);
  --accent-edge: rgba(244, 168, 58, 0.35);

  /* Semantic colors (not theme-swapped) */
  --cyan: #6ec2ad;
  --magenta: #c98dc4;
  --red: #e07262;
  --green: #8bc572;

  /* Density-driven spacing */
  --pad-x: 32px;
  --pad-y: 22px;
  --gap: 18px;
  --row-py: 14px;

  --max-w: 1400px;

  /* Type families */
  --ff-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ff-serif: var(--ff-mono);  /* serif alias falls back to mono in Console direction */
  --ff-sans: var(--ff-mono);   /* sans alias too */

  /* Spacing aliases (back-compat for templates still using --space-N) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --space-9: 96px; --space-10: 144px; --space-12: 192px;

  /* Type scale (back-compat aliases) */
  --fs-xs: 10.5px; --fs-sm: 11.5px; --fs-base: 13px;
  --fs-md: 14.5px; --fs-lg: 17px; --fs-xl: 24px;
  --fs-2xl: 32px; --fs-3xl: 48px; --fs-4xl: 64px;

  /* Surface + text aliases (back-compat) */
  --surface: var(--bg-2);
  --surface-1: var(--bg-2);
  --surface-2: var(--bg-3);
  --surface-3: var(--bg-4);
  --surface2: var(--bg-3);
  --surface-alt: var(--bg-3);
  --surface-card-bg: var(--bg-2);
  --surface-card-border: var(--rule);
  --surface-card-hover: var(--bg-3);
  --bg-alt: var(--bg-2);
  --bg-elevated: var(--bg-2);
  --bg-muted: var(--bg-3);
  --bg-secondary: var(--bg-3);
  --panel: var(--bg-2);
  --paper: var(--fg);
  --ink: var(--fg);
  --ink-soft: var(--fg-2);
  --ink-mute: var(--fg-3);
  --ink-muted: var(--fg-3);
  --muted: var(--fg-3);
  --low: var(--fg-3);
  --text: var(--fg);
  --text-2: var(--fg-2);
  --text-muted: var(--fg-3);
  --color-text: var(--fg);
  --border: var(--rule);
  --border-color: var(--rule);
  --link: var(--accent);
  --link-visited: var(--cyan);
  --accent-light: var(--accent-soft);
  --accent-mute: var(--accent-edge);
  --code-bg: var(--bg-3);
  --code-border: var(--rule);
  --code-fg: var(--fg);
  --section-py-sm: 16px;
  --section-py-md: 22px;
  --section-py-lg: 36px;

  /* Semantic status (kept from Phase 65c) */
  --ok: var(--green); --warn: var(--accent); --err: var(--red); --crit: var(--red);

  /* Radii + shadow */
  --r-sm: 2px; --r-md: 6px; --r-lg: 8px;
  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);

  /* Container widths (back-compat) */
  --w-prose: 62ch;
  --w-narrow: 56rem;
  --w-wide: var(--max-w);

  /* Mono alias */
  --mono: var(--ff-mono);
}

[data-accent="green"] {
  --accent: #8bc572;
  --accent-2: #5e9846;
  --accent-soft: rgba(139, 197, 114, 0.10);
  --accent-edge: rgba(139, 197, 114, 0.35);
}
[data-accent="cyan"] {
  --accent: #6ec2ad;
  --accent-2: #3a9b82;
  --accent-soft: rgba(110, 194, 173, 0.10);
  --accent-edge: rgba(110, 194, 173, 0.35);
}
[data-accent="magenta"] {
  --accent: #c98dc4;
  --accent-2: #9a5f95;
  --accent-soft: rgba(201, 141, 196, 0.10);
  --accent-edge: rgba(201, 141, 196, 0.35);
}

[data-density="compact"] {
  --pad-y: 14px; --gap: 12px; --row-py: 10px;
}
[data-density="cozy"] {
  --pad-y: 30px; --gap: 24px; --row-py: 18px;
}

/* Accessibility utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}