/* ============================================================
   style.css — Design tokens, reset, and base typography
   THE PRIMARCH ARCHIVE
   ============================================================

   Full layout composition lives in layout.css (Stage 2).
   Motion lives in animations.css (Stage 3).
   This file only establishes the visual language everything
   else draws from.
   ------------------------------------------------------------ */

:root {
  /* ---- Palette -------------------------------------------- */
  --c-void:        #08080b;   /* deep space background */
  --c-void-raised: #101014;   /* panels sitting above the void */
  --c-gold:        #c9a961;   /* aquila gold, primary accent */
  --c-gold-dim:    #8a7440;   /* muted gold for borders/dividers */
  --c-blood:       #7a1c1c;   /* imperial red, warning/traitor accent */
  --c-steel:       #4a5a68;   /* cold steel blue-grey */
  --c-parchment:   #e4d9b8;   /* aged parchment, primary body text */
  --c-parchment-dim: #a89d80; /* secondary/muted text */
  --c-warp:        #3d2a5c;   /* warp purple, daemon/heresy accent */

  /* ---- Type ------------------------------------------------- */
  --font-display: 'Cinzel', serif;         /* engraved gothic headers */
  --font-body:    'EB Garamond', serif;    /* archive prose */
  --font-data:    'Space Mono', monospace; /* cogitator data readouts */

  /* ---- Scale -------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius-sm: 2px;
  --radius-md: 4px;

  --ease-imperial: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-void);
  color: var(--c-parchment);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
  color: var(--c-gold);
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--c-parchment);
}

::selection {
  background: var(--c-gold);
  color: var(--c-void);
}

/* Respect reduced-motion preference throughout the site */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Utility text used for eyebrows / data readouts ----------- */
.eyebrow-text {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

/* Visible keyboard focus everywhere (accessibility floor) */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* Structural composition (nav, hero, sections, grids, overlays) now lives
   in layout.css. This file stays limited to tokens, reset, and type. */