/* =========================================================
   EDITORIAL SIGNAL — Dark Horse Works Design System
   Foundation tokens: color, type, spacing, rules, motion.
   Link this once. Use vars. Never hardcode.
   ========================================================= */

/* ---------- Fonts ---------- */
/* NOTE: No custom brand fonts were provided. Inter + Instrument Serif
   + JetBrains Mono are the nearest Google Fonts matches to the
   provided references. Replace with licensed fonts when available
   by dropping TTFs into /fonts and updating @font-face blocks. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Palette ---------- */
  --paper:       #F2F0EB;   /* warm off-white canvas */
  --bone:        #E6E3DC;   /* section bands, card fills */
  --fog:         #C8C4BB;   /* low-contrast rules */
  --ash:         #6B6862;   /* secondary prose */
  --ink:         #0A0A0A;   /* primary type, rules */
  --ink-hover:   #1A1A1A;   /* primary button hover */
  --signal:      #D64A1F;   /* reserved editorial red */

  /* ---------- Semantic color aliases ---------- */
  --bg:          var(--paper);
  --bg-alt:      var(--bone);
  --fg1:         var(--ink);      /* primary text */
  --fg2:         var(--ash);      /* secondary text */
  --fg3:         var(--fog);      /* tertiary / disabled */
  --rule:        var(--ink);
  --rule-soft:   var(--fog);
  --accent:      var(--signal);

  /* Surfaces */
  --surface:         var(--paper);
  --surface-alt:     var(--bone);
  --surface-inverse: var(--ink);

  /* Overlays (used sparingly) */
  --hover-overlay: rgba(10, 10, 10, 0.04);
  --press-overlay: rgba(10, 10, 10, 0.08);

  /* ---------- Type families ---------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-sans);

  /* ---------- Type scale ---------- */
  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-display-m:  40px;
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         18px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;

  /* Line heights */
  --lh-display: 0.95;
  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-prose:   1.6;

  /* Tracking */
  --track-display: -0.035em;
  --track-heading: -0.02em;
  --track-snug:    -0.01em;
  --track-normal:  0;
  --track-eyebrow: 0.14em;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- Spacing (8pt grid) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;
  --sp-10: 192px;

  /* ---------- Rules ---------- */
  --rule-thin:      1px;
  --rule-thick:     3px;
  --masthead-rule:  3px;
  --rule-color:     var(--ink);
  --rule-color-soft:var(--fog);

  /* ---------- Corners ---------- */
  /* There is one value. There are no exceptions. */
  --radius: 0;

  /* ---------- Shadows ---------- */
  /* Shadows are not part of this system. */
  --shadow: none;

  /* ---------- Layout ---------- */
  --max-content: 1280px;
  --measure:     68ch;
  --gutter:      clamp(24px, 5vw, 80px);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   150ms;
  --dur:        300ms;
  --dur-slow:   600ms;

  /* ---------- Focus ---------- */
  --focus-ring: 2px solid var(--ink);
  --focus-offset: 2px;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root.auto-theme, :root.dark {
    --paper: #0A0A0A;
    --bone:  #141414;
    --fog:   #2E2E2E;
    --ash:   #8F8C85;
    --ink:   #F2F0EB;
    --ink-hover: #E0DED8;
    --signal: #E65A2F;
    --hover-overlay: rgba(242,240,235,0.06);
    --press-overlay: rgba(242,240,235,0.12);
  }
}
:root.dark {
  --paper: #0A0A0A;
  --bone:  #141414;
  --fog:   #2E2E2E;
  --ash:   #8F8C85;
  --ink:   #F2F0EB;
  --ink-hover: #E0DED8;
  --signal: #E65A2F;
  --hover-overlay: rgba(242,240,235,0.06);
  --press-overlay: rgba(242,240,235,0.12);
}

/* =========================================================
   Base & semantic styles
   ========================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings / display ---------- */
.display-xl, .display-l, .display-m,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

.display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.display-l {
  font-size: var(--fs-display-l);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
.display-m {
  font-size: var(--fs-display-m);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: var(--track-snug);
}

/* ---------- Body ---------- */
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--fg1);
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-normal); }
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-normal); }
.muted  { color: var(--fg2); }

/* ---------- Editorial accent ---------- */
.editorial {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg2);
  line-height: 1;
}

/* ---------- Captions / labels ---------- */
.caption {
  font-size: var(--fs-caption);
  color: var(--fg2);
  line-height: 1.4;
}

/* ---------- Code ---------- */
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: opacity var(--dur-fast) var(--ease);
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- Rules ---------- */
hr, .rule {
  border: 0;
  border-top: var(--rule-thin) solid var(--rule);
  margin: 0;
}
.rule-thick { border-top-width: var(--rule-thick); }
.rule-soft  { border-top-color: var(--rule-soft); }

/* ---------- Pull-quote ---------- */
.pullquote {
  border-left: var(--rule-thick) solid var(--ink);
  padding: var(--sp-1) var(--sp-4);
  color: var(--fg1);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  max-width: var(--measure);
}

/* ---------- Focus ring utility ---------- */
.focus-ring:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--ink);
  color: var(--paper);
}