/* Rosewood Crating — design tokens (LOCKED, see CLAUDE.md) */

/* ---- Self-hosted fonts (no third-party request; font-display:swap) ---- */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cinzel-400.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cinzel-500.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/marcellus-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  /* Palette — two-tone scheme. The page ground is LIGHT (ivory) by default;
     dark espresso panels are opt-in via `.panel-dark` / `.site-footer`
     (see site.css), which re-map these same variables to the dark set. */
  --color-espresso: #F5EEE1;            /* page ground (warm ivory) */
  --color-surface: #ECE3D1;             /* cards, inputs, partner strip */
  --color-heartwood: #E8DBC0;           /* feature band (warm sand) */
  --color-bone: #211913;                /* primary text / headings */
  --color-dim: #574836;                 /* secondary copy */
  --color-muted: #6B5A3F;               /* manifest captions, fine print — clears AA 4.5:1 on band/surface tints */
  --color-brass: #8A5D17;               /* gold accent — deepened for AA on ivory */
  --color-brass-light: #6F4A11;         /* hover: deeper on light */
  --color-hairline: rgba(33, 25, 19, 0.15);
  --color-field-border: #8A7B63;        /* form controls — 3.23:1 on surface, meets 1.4.11 */

  /* Type families */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (mobile-first) */
  --fs-wordmark: 1.5rem;
  --fs-display: clamp(2rem, 5vw + 1rem, 3.75rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-mono: 0.75rem;

  /* Letter-spacing — Marcellus caps */
  --tracking-wide: 0.18em;
  --tracking-mono: 0.08em;

  /* Layout */
  --measure: 64ch;
  --gutter: 1.25rem;
  --section-y: clamp(3rem, 8vw, 6rem);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-espresso);
  color: var(--color-bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
}

/* Wordmark — letterspaced caps in Marcellus */
.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-bone);
  line-height: 1;
}

/* Display heading */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-bone);
  margin: 0 0 1rem;
  font-weight: 400;
}

/* Body copy */
.lede {
  color: var(--color-dim);
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}

/* Mono manifest caption — the craft signature */
.manifest {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-muted);
}

/* Brass hairline divider */
.hairline {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: 2rem 0;
}

/* Layout primitives */
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}


/* Focus state — visible, brass */
:focus-visible {
  outline: 2px solid var(--color-brass-light);
  outline-offset: 3px;
}

/* Reduced motion — honoured everywhere */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}