/* Design tokens — brand-website-strategy-v2.md §8, verbatim. Do not edit values here;
   the strategy doc is the source of truth. */

/* Self-hosted fonts — two files per family, per spec §3. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* dark base */
  --ink-0: #0F0E0D;  --ink-1: #1A1714;  --ink-2: #242019;
  --line: #2B2621;
  --ivory: #F4EFE6;  --muted: #A39B90;  --faint: #8D857B;
  /* accent */
  --gold: #C9A76B;  --gold-deep: #8F723F;  --gold-tint: #E3C893;
  /* light showcase bands */
  --paper: #F7F3EC;  --paper-ink: #171310;  --paper-line: #E4DCCE;
  /* functional */
  --ok: #7FBF8F;  --err: #E0685A;  --warn: #D08B3C;
  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* shape & rhythm */
  --radius-card: 16px;  --radius-pill: 999px;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px;
}

/* Base element defaults on the tokens */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(34px, 7vw, 56px); }
h2 { font-size: clamp(26px, 5vw, 30px); }
h3 { font-size: 22px; }

p { margin: 0 0 var(--space-2); }

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

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; font-variant-numeric: tabular-nums; }