/* tokens/fonts.css */
/* Webfonts load from Google Fonts (no local binaries provided). */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:wght@400;500;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");


/* tokens/colors.css */
:root {
  /* Base palette */
  --paper: #F4F1EA;
  --ink: #1A1814;
  --red-ochre: #772A27;
  --red-ochre-deep: #5F211E; /* hover state */
  --stone: #9B7E46;
  --hairline: #DCD5C6;

  /* Semantic aliases */
  --bg: var(--paper);
  --text-body: var(--ink);
  --text-meta: var(--stone);   /* bylines, captions, metadata. 3.4:1 on Paper: large type only */
  --accent: var(--red-ochre);  /* links, hovers, CTA, one label per screen. NEVER on Ink */
  --accent-hover: var(--red-ochre-deep);
  --border: var(--hairline);
  --surface-inverse: var(--ink);      /* footer block */
  --text-on-inverse: var(--paper);    /* type and links on Ink are Paper, never the accent */
  --footer-hairline: rgba(244, 241, 234, 0.18);
}


/* tokens/typography.css */
:root {
  /* Families */
  --font-display: 'Fraunces', Georgia, serif;                          /* headlines, title case */
  --font-body: 'Libre Baskerville', Baskerville, Georgia, serif;       /* body, sentence case */
  --font-utility: 'Inter', -apple-system, sans-serif;                  /* labels, uppercase */
  --font-mono: ui-monospace, Menlo, Consolas, monospace;               /* specs, hex values */

  /* Display */
  --weight-display: 580;                       /* 550 to 600 */
  --leading-display: 1.05;
  --text-h1: clamp(2.6rem, 7vw, 5.5rem);
  --text-h2: clamp(2.1rem, 4.2vw, 3.1rem);
  --wordmark-variation: 'opsz' 28, 'wght' 560; /* soft optical size */

  /* Body */
  --text-body-size: 1.15rem;                   /* 1.15 to 1.25rem */
  --leading-body: 1.6;
  --measure: 62ch;

  /* Utility labels */
  --text-label: 0.75rem;                       /* 0.75 to 0.8rem */
  --weight-label: 500;
  --tracking-label: 0.14em;                    /* 0.12 to 0.14em */
}


/* tokens/spacing.css */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --page-max: 1180px;
  --page-gutter: clamp(20px, 5vw, 48px);
  --section-pad: clamp(64px, 10vh, 110px);
  --hairline-w: 1px; /* hairlines stay 1px at every size */
  --radius: 0;       /* square corners everywhere; the favicon dot is the only circle */
}


/* tokens/motion.css */
:root {
  --ease: cubic-bezier(0, 0, 0.2, 1); /* ease-out */
  --duration-fast: 300ms;
  --duration-slow: 600ms;
  --stagger: 80ms;
  --rise-distance: 12px; /* sections fade up 12px, once */
}


/* tokens/base.css */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
a:hover { color: var(--accent-hover); background-size: 100% 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }