/* ==========================================================================
   Space of Antiques — design tokens, reset & typographic utilities
   All custom properties and classes are namespaced with `soa` / `--soa-`
   to keep the theme conflict-free when dropped into any project.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* Ivory paper palette */
  --soa-ivory: #f4efe6;
  --soa-ivory-2: #ece5d6;
  --soa-paper: #faf6ed;
  --soa-ink: #1a1612;
  --soa-ink-2: #2c251c;
  --soa-rule: #1a1612;
  --soa-muted: #6b5f52;
  --soa-muted-2: #8a7d6d;
  --soa-hair: rgba(26, 22, 18, 0.14);
  --soa-hair-strong: rgba(26, 22, 18, 0.3);

  /* Accents */
  --soa-oxblood: #8a3d2e;
  --soa-gilt: #b08642;
  --soa-verdigris: #5a7d76;

  /* Surface tones */
  --soa-site-bg: #ffffff;
  --soa-site-bg-2: #f4efe6;   /* warm section break */
  --soa-site-bg-3: #faf6ed;
  --soa-on-ink: #ffffff;      /* text/icon colour that sits on an --soa-ink fill */
  --soa-line: var(--soa-ink); /* strong divider / rule colour */

  /* Type families */
  --soa-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --soa-sans: "Inter", -apple-system, system-ui, sans-serif;
  --soa-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* ── Dark ("velvet") theme — flips the surface & ink tokens ── */
:root[data-theme="dark"] {
  --soa-ivory: #ece5d6;
  --soa-ivory-2: #d9cfba;
  --soa-paper: #211c15;
  --soa-ink: #ece5d6;
  --soa-ink-2: #f4efe6;
  --soa-rule: #ece5d6;
  --soa-muted: #9a8f7e;
  --soa-muted-2: #7a6f60;
  --soa-hair: rgba(236, 229, 214, 0.13);
  --soa-hair-strong: rgba(236, 229, 214, 0.28);
  --soa-oxblood: #c4664f;
  --soa-gilt: #c9a869;
  --soa-site-bg: #14110d;
  --soa-site-bg-2: #1b1712;
  --soa-site-bg-3: #211c15;
  --soa-on-ink: #14110d;
  --soa-line: rgba(236, 229, 214, 0.30);   /* softer rule colour on dark */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--soa-sans);
  color: var(--soa-ink);
  background: var(--soa-site-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
:focus-visible { outline: 2px solid var(--soa-oxblood); outline-offset: 3px; }

/* ── Typographic helpers ── */
.soa-serif { font-family: var(--soa-serif); }
.soa-mono  { font-family: var(--soa-mono); }
.soa-sans  { font-family: var(--soa-sans); }
.soa-italic { font-style: italic; }
.soa-em { font-style: italic; }

/* Small mono "kicker" / eyebrow label used across every page */
.soa-kicker {
  font-family: var(--soa-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soa-muted);
}
.soa-kicker--wide { letter-spacing: 0.25em; }

/* Horizontal rules */
.soa-rule { border: 0; border-top: 1px solid var(--soa-line); height: 0; margin: 0 0 40px; }
.soa-hair { border: 0; border-top: 1px solid var(--soa-hair); height: 0; margin: 0; }

/* Scholarly specimen caption grid */
.soa-spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  font-family: var(--soa-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soa-muted);
}
.soa-spec .soa-spec-k { font-size: 8.5px; opacity: 0.75; margin-bottom: 2px; }
.soa-spec .soa-spec-v { color: var(--soa-ink); font-weight: 500; }

/* Fine drop-cap on lead paragraphs */
.soa-drop-cap::first-letter {
  font-family: var(--soa-serif);
  font-weight: 500;
  font-size: 4.2em;
  float: left;
  line-height: 0.82;
  padding: 8px 10px 0 0;
  color: var(--soa-ink);
}

/* Visually-hidden helper for accessible labels */
.soa-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}