@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #F0EDE8;
  --fg: #1A1A1A;
  --fg-muted: rgba(26,26,26,0.5);
  --fg-faint: rgba(26,26,26,0.12);
  --fg-ghost: rgba(26,26,26,0.05);
  --serif: 'Instrument Serif', serif;
  --sans: 'Inter', sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --text-xs: 0.6rem;
  --text-sm: 0.75rem;
  --text-base: 0.85rem;
  --text-lg: 1.05rem;
  --text-display: clamp(1.4rem, 3vw, 2.4rem);
  --text-hero: clamp(3.5rem, 13vw, 12rem);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --border: 1px solid var(--fg-faint);
  --border-strong: 1px solid var(--fg);

  /* Article tokens */
  --accent: #8B6B52;
  --accent-light: #A8876E;
  --fg-light: rgba(26,26,26,0.3);
  --callout-warn-border: #C9A96E;
  --callout-info-border: #7A98B3;
}

body.parchment {
  --bg: #E8DCC8;
  --fg: #2C2A25;
  --fg-muted: rgba(44,42,37,0.5);
  --fg-faint: rgba(44,42,37,0.1);
  --fg-ghost: rgba(44,42,37,0.04);
  --border: 1px solid rgba(44,42,37,0.1);
  --border-strong: 1px solid rgba(44,42,37,0.8);

  /* Article tokens — parchment */
  --accent: #7A5E44;
  --accent-light: #96775C;
  --fg-light: rgba(44,42,37,0.3);
  --callout-warn-border: #B89A5E;
  --callout-info-border: #6B8BA3;
}

body.dark {
  --bg: #141414;
  --fg: #E8E5E0;
  --fg-muted: rgba(232,229,224,0.5);
  --fg-faint: rgba(232,229,224,0.1);
  --fg-ghost: rgba(232,229,224,0.04);
  --border: 1px solid rgba(232,229,224,0.3);
  --border-strong: 1px solid rgba(232,229,224,0.6);

  /* Article tokens — dark mode */
  --accent: #B89A7E;
  --accent-light: #C4A88E;
  --fg-light: rgba(232,229,224,0.3);
  --callout-warn-border: #C9A96E;
  --callout-info-border: #7A98B3;
}