/* ════════════════════════════════════════════════════════════════
   Crit Happens — shared design tokens & base styles
   Loaded by every page BEFORE the page's own <style> block, so
   page-specific rules can still override anything here.
   ════════════════════════════════════════════════════════════════ */

/* ── Heading font (self-hosted) ── */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/archivo-black.woff2') format('woff2');
}

/* ── Design tokens ──
   NOTE: the --purple* names are legacy — they now hold the slate-purple
   accent (#746D9B) from the brand swatch. Renaming them would mean
   touching every page, so the names stay and only the values changed.
   Scheme: neutral near-black surfaces + a single slate-purple accent. */
:root {
  /* Accent (slate purple — brand "Purple Main") */
  --purple:       #746D9B;   /* Purple Main */
  --purple-dark:  #4F506F;   /* Purple Shadow */
  --purple-light: #A4A2C3;   /* Purple Highlight */
  --purple-glow:  rgba(116, 109, 155, 0.30);

  /* Surfaces (neutral near-black) */
  --bg:    #0e0e10;
  --bg2:   #141416;
  --bg3:   #1c1c20;
  --card:  #18181c;
  --border: rgba(164, 162, 195, 0.20);

  /* Text */
  --text:  #ececee;
  --muted: #93999b;
  --white: #ffffff;

  /* Status */
  --success: #22c55e;
  --warning: #eab308;
  --danger:  #ef4444;
}

/* ── Headings ── */
h1, .section-title {
  font-family: 'Archivo Black', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;        /* Archivo Black only ships one (black) weight */
  font-synthesis: none;    /* don't let the browser fake-bold it */
}

/* ── Shared element fixes ── */
/* <picture> wrappers shouldn't affect layout — size the img as before */
picture { display: contents; }

/* ── Logo mark in nav/header logos ── */
.nav-logo, .header-logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.logo-mark { height: 36px; width: auto; display: block; }

/* ── Inline icon helper ── */
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}