@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* colors */
  --ink:#1c1917;
  --ink-soft:#44403a;
  --paper:#faf7f2;
  --surface:#f2ede4;
  --surface-2:#e8e1d4;
  --line:#dcd3c3;
  --stone:#8f8578;
  --espresso:#5b3a29;
  --espresso-light:#8a6650;
  --espresso-dark:#3c2618;
  --moss:#4f5d3f;
  --rust:#a8442c;
  --white:#ffffff;

  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-muted:var(--stone);
  --text-on-accent:var(--white);
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-raised:var(--surface);
  --surface-sunken:var(--surface-2);
  --border-default:var(--line);
  --border-strong:var(--stone);
  --accent:var(--espresso);
  --accent-hover:var(--espresso-light);
  --accent-active:var(--espresso-dark);
  --success:var(--moss);
  --danger:var(--rust);
  --focus-ring:var(--espresso);

  /* typography */
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',Arial,Helvetica,sans-serif;
  --font-display:var(--font-serif);
  --font-body:var(--font-sans);
  --font-mono:'SF Mono',Consolas,Menlo,monospace;
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-md:1.125rem;
  --text-lg:1.375rem;
  --text-xl:1.75rem;
  --text-2xl:2.25rem;
  --text-3xl:3rem;
  --text-4xl:4rem;
  --leading-tight:1.1;
  --leading-snug:1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.7;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.04em;

  /* spacing */
  --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;
  --space-10:128px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-full:999px;
  --border-width:1px;
  --shadow-sm:0 1px 2px rgba(28,25,23,0.06);
  --shadow-md:0 4px 12px rgba(28,25,23,0.08);
  --shadow-lg:0 12px 32px rgba(28,25,23,0.12);
  --container-width:760px;
  --container-wide:1080px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms;
  --duration-normal:200ms;
}