@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* paper */
  --paper-0: #FBF7F0;
  --paper-1: #F4EDDE;
  --paper-2: #EBDFC7;
  --card-bg: #FFFDF8;

  /* ink */
  --ink-900: #2A2015;
  --ink-700: #4A3A29;
  --ink-500: #77644B;
  --ink-300: #A6957C;
  --ink-100: #D9CCB4;

  /* clay */
  --clay-800: #6E3E22;
  --clay-700: #8F4E2B;
  --clay-600: #AD5F35;
  --clay-500: #C1784F;
  --clay-300: #DDA57C;
  --clay-200: #EAC7A9;
  --clay-100: #F4E1CE;

  /* sage */
  --sage-700: #445136;
  --sage-600: #5C6B49;
  --sage-500: #7B8C63;
  --sage-300: #B7C29E;
  --sage-100: #E4E9D6;

  /* ochre */
  --ochre-700: #7C5F24;
  --ochre-600: #997631;
  --ochre-300: #D9BE7C;
  --ochre-100: #EFE2BE;

  /* signal */
  --signal-error: #A23B2E;
  --signal-error-bg: #F5E1DA;

  /* semantic */
  --surface-page: var(--paper-0);
  --surface-section-alt: var(--paper-1);
  --surface-sunken: var(--paper-2);
  --surface-card: var(--card-bg);

  --border-subtle: #E7DAC0;
  --border-default: #D8C6A3;
  --border-strong: var(--ink-300);

  --text-primary: var(--ink-900);
  --text-body: var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-placeholder: var(--ink-300);
  --text-on-brand: #FBF6EC;

  --brand-primary: var(--clay-600);
  --brand-primary-hover: var(--clay-700);
  --brand-primary-subtle: var(--clay-100);

  --accent-botanical: var(--sage-600);
  --accent-specimen: var(--ochre-600);

  --focus-ring: var(--clay-500);

  /* fonts */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Lora", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* type scale */
  --text-display-1: 400 clamp(3rem, 2.4rem + 2.5vw, 4.5rem) / 1.04 var(--font-display);
  --text-display-2: 400 clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem) / 1.08 var(--font-display);
  --text-h2: 500 1.75rem/1.2 var(--font-display);
  --text-h3: 600 1.375rem/1.3 var(--font-display);
  --text-body-lg: 400 1.1875rem/1.6 var(--font-body);
  --text-body: 400 1.0625rem/1.65 var(--font-body);
  --text-body-sm: 400 0.9375rem/1.55 var(--font-body);
  --text-caption: 400 0.8125rem/1.5 var(--font-body);
  --text-mono-label: 500 0.75rem/1.4 var(--font-mono);

  --tracking-label: 0.08em;
  --tracking-display: -0.01em;

  /* spacing */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(42, 32, 21, 0.07), 0 4px 10px rgba(42, 32, 21, 0.05);
  --shadow-focus: 0 0 0 3px rgba(193, 120, 79, 0.35);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-base: 200ms;
}