/* [ Work in Progress ] — Site Stylesheet
   Consolidated from the WiP design system tokens + base styles.
   Single file replaces the _ds/ bundle. */

/* ── GOOGLE FONTS ─────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ── COLOR TOKENS ─────────────────────────────────────────────────────── */

:root {
  /* BRAND PALETTE */
  --ink:    #281E34;   /* Anchor — deep aubergine near-black              */
  --smoke:  #322747;   /* Layer on ink — one half-step up; cards, insets  */
  --bone:   #EFE9DB;   /* Surface / paper — warm off-white; primary page  */
  --paper:  #F7F2E6;   /* Lighter paper — inset panels & cards on bone    */
  --amber:  #D4870A;   /* Accent — brass-gold; punctuation, never fill    */
  --claret: #6E2A3A;   /* Divider — bordeaux claret; section breaks       */
  --stone:  #8A7E73;   /* Mid neutral — warm taupe; captions, hairlines   */

  /* HAIRLINES */
  --hairline:           rgba(40, 30, 52, 0.14);
  --hairline-strong:    rgba(40, 30, 52, 0.32);
  --hairline-on-ink:    rgba(239, 233, 219, 0.16);

  /* SEMANTIC ROLES */
  --bg:              var(--bone);
  --bg-cover:        var(--ink);
  --bg-divider:      var(--claret);
  --surface-card:    var(--paper);
  --surface-inset:   var(--smoke);

  --fg:                  var(--ink);
  --fg-on-dark:          var(--bone);
  --fg-muted:            rgba(40, 30, 52, 0.72);
  --fg-muted-on-dark:    rgba(239, 233, 219, 0.78);
  --fg-caption:          var(--stone);
  --accent:              var(--amber);
  --accent-fg:           var(--ink);
}

/* ── TYPOGRAPHY TOKENS ────────────────────────────────────────────────── */

:root {
  /* FAMILIES */
  --font-display: "Bebas Neue", sans-serif;
  --font-serif:   "Instrument Serif", serif;
  --font-sans:    "Geist", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  --font-features: "ss01", "cv11";

  /* TYPE SCALE */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   18px;
  --text-lg:   clamp(19px, 2vw, 24px);
  --text-xl:   clamp(24px, 3vw, 36px);
  --text-2xl:  clamp(40px, 4.4vw, 64px);
  --text-3xl:  clamp(56px, 8vw, 120px);

  /* LEADING */
  --leading-tight:  0.95;
  --leading-snug:   1.05;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  /* TRACKING */
  --tracking-tight:   -0.01em;
  --tracking-display: 0.02em;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;
  --tracking-label:   0.14em;
}

/* ── SPACING & SHAPE TOKENS ───────────────────────────────────────────── */

:root {
  /* SPACING SCALE */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* LAYOUT */
  --content-width:      700px;
  --content-width-wide: 960px;
  --gutter:             var(--space-6);

  /* SHAPE */
  --radius:      2px;
  --radius-pill: 2px;

  /* BORDER */
  --border-width:  1px;
  --border-dashed: 1px dashed;
}

/* ── BASE STYLES ──────────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: var(--font-features);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

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

/* ── SEMANTIC TYPE CLASSES ────────────────────────────────────────────── */

.wip-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
}

.wip-cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.wip-editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.wip-editorial .em { color: var(--claret); }

.wip-eyebrow,
.wip-subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.wip-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  letter-spacing: -0.005em;
}

.wip-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  max-width: 65ch;
}

.wip-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-caption);
}

.wip-label,
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-caption);
}

.wip-bracket { color: var(--amber); }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
}