@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..600&family=Public+Sans:ital,wght@0,300..700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --gold-50: #FBF5E9;
  --gold-100: #F4E6C9;
  --gold-200: #E8D0A2;
  --gold-300: #D7B475;
  --gold-400: #C89B4C;
  --gold-500: #B8863A;
  --gold-600: #9A6E2C;
  --gold-700: #77531F;

  --bone-50: #FDFBF7;
  --bone-100: #FAF7F2;
  --bone-200: #F3EEE5;
  --bone-300: #E7E0D3;
  --bone-400: #D6CDBC;

  --carbon-900: #1E1B16;
  --carbon-800: #2E2A24;
  --carbon-700: #443F36;
  --carbon-600: #5D5648;
  --carbon-500: #7A7263;
  --carbon-400: #9C9484;
  --carbon-300: #BDB5A5;

  --sage-50: #F1F4EE;
  --sage-100: #E1E8DB;
  --sage-200: #C4D0B9;
  --sage-400: #7C8D6E;
  --sage-500: #68795A;
  --sage-600: #52603F;

  --clay-50: #FBEDE7;
  --clay-100: #F3D9CD;
  --clay-400: #B4603F;
  --clay-500: #9A4E31;

  --slate-400: #6B7280;
  --slate-700: #3B4252;

  --font-serif-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans-ui: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono-record: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-1: 56px;
  --fs-display-2: 40px;
  --fs-title-1: 30px;
  --fs-title-2: 24px;
  --fs-title-3: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-display: 1.06;
  --lh-title: 1.18;
  --lh-body: 1.6;
  --lh-tight: 1.35;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --ls-display: -0.02em;
  --ls-title: -0.01em;
  --ls-body: 0em;
  --ls-micro: 0.08em;

  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 128px;

  --gutter-page: 24px;
  --gutter-page-lg: 56px;
  --measure-prose: 64ch;
  --measure-narrow: 44ch;
  --width-content: 1120px;
  --width-app-rail: 264px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --border-hairline-width: 1px;

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(46, 42, 36, 0.06);
  --shadow-2: 0 2px 4px rgba(46, 42, 36, 0.05), 0 10px 24px -14px rgba(46, 42, 36, 0.14);
  --shadow-3: 0 4px 8px rgba(46, 42, 36, 0.05), 0 20px 48px -20px rgba(46, 42, 36, 0.20);
  --shadow-halo: 0 0 0 6px rgba(200, 155, 76, 0.16);
  --shadow-halo-wide: 0 0 0 14px rgba(200, 155, 76, 0.08);
  --ring-focus: 0 0 0 3px rgba(184, 134, 58, 0.34);
  --inset-hairline: inset 0 0 0 1px var(--border-hairline);
  --gradient-halo: radial-gradient(60% 60% at 50% 40%, rgba(200, 155, 76, 0.22) 0%, rgba(200, 155, 76, 0) 70%);
  --gradient-protect-top: linear-gradient(to bottom, var(--bone-100) 0%, rgba(250, 247, 242, 0) 100%);
  --gradient-protect-bottom: linear-gradient(to top, var(--bone-100) 0%, rgba(250, 247, 242, 0) 100%);

  --ease-calm: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-ambient: 1400ms;
  --transition-control: background-color var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);

  --surface-page: var(--bone-100);
  --surface-card: #ffffff;
  --surface-raised: var(--bone-50);
  --surface-sunken: var(--bone-200);
  --surface-inverse: var(--carbon-800);
  --surface-accent-soft: var(--gold-50);
  --surface-calm-soft: var(--sage-50);
  --surface-alert-soft: var(--clay-50);

  --text-strong: var(--carbon-900);
  --text-body: var(--carbon-800);
  --text-muted: var(--carbon-500);
  --text-faint: var(--carbon-400);
  --text-on-inverse: var(--bone-100);
  --text-on-accent: #ffffff;
  --text-accent: var(--gold-700);
  --text-link: var(--gold-700);
  --text-link-hover: var(--carbon-900);

  --border-hairline: var(--bone-300);
  --border-strong: var(--bone-400);
  --border-accent: var(--gold-300);
  --border-inverse: rgba(250, 247, 242, 0.18);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-press: var(--gold-700);
  --accent-soft-text: var(--gold-700);

  --status-positive: var(--sage-500);
  --status-positive-soft: var(--sage-100);
  --status-attention: var(--gold-500);
  --status-escalation: var(--clay-400);
  --status-escalation-soft: var(--clay-100);

  --record-ink: var(--slate-700);
  --record-meta: var(--slate-400);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif-display);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  margin: 0;
}

h1 {
  font-size: var(--fs-display-2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-control);
}

a:hover {
  color: var(--text-link-hover);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}