/* Design tokens. The only file that may contain raw colors, font stacks, sizes and shadows.
   Contract: docs/design-system.md section 3. Category tints must equal ARTICLE_IMAGE_COLORS in article-image.js. */
:root{
  --color-canvas:#f3f3ef;
  --color-surface:#fcfcf9;
  --color-surface-sunken:#f1f2ed;
  --color-surface-muted:#e8e9e2;
  --color-surface-hover:#edf0e8;
  --color-sidebar:#eceee7;
  --color-ink:#252724;
  --color-ink-reading:#34362f;
  --color-muted:#66705e;
  --color-line:#e1e3db;
  --color-line-strong:#d9ddd3;
  --color-accent:#334936;
  --color-accent-hover:#263b29;
  --color-accent-ink:#ffffff;
  --color-accent-soft:#dfe7d6;
  --color-accent-soft-line:#bdcbb2;
  --color-link:#516345;
  --color-focus:#7b9569;
  --color-danger:#a23f35;
  --color-toast:#2c2922;
  --color-backdrop:#201b1355;
  --color-draft:#f5f1e5;

  --tint-what:#fcf0b9;
  --tint-why:#f8e2eb;
  --tint-so-what:#e1ecfa;
  --tint-important:#ede2f7;
  --tint-unknown:#e2efd9;
  --tint-legacy-orange:#ffe4c2;
  --tint-unclassified:#fff2b6;
  --overlay-white-weak:#ffffff90;
  --overlay-white:#ffffffb0;
  --overlay-ink-line:#00000014;

  --font-ui:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-serif:'Iowan Old Style','AppleMyungjo','Batang','Noto Serif KR',serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;

  --text-xs:11px;
  --text-sm:12px;
  --text-base:13px;
  --text-md:14px;
  --text-lg:15px;
  --text-xl:18px;
  --text-2xl:20px;
  --text-3xl:24px;
  --text-display:clamp(32px,5vw,50px);
  --text-title-serif:clamp(26px,3vw,38px);
  --text-title-serif-compact:clamp(22px,2.4vw,30px);
  --text-reading:17px;
  --text-reading-large:19px;
  --text-reading-larger:21px;
  --leading-reading:1.7;
  --tracking-heading:-.03em;
  --tracking-title:-.035em;
  --tracking-label:.09em;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:64px;

  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:9px;
  --radius-lg:12px;
  --radius-xl:18px;
  --radius-pill:999px;

  --control-sm:32px;
  --control-md:40px;
  --control-lg:48px;
  --control-icon:36px;
  --control-touch:44px;
  --control-pad-x:14px;

  --focus-ring:3px solid var(--color-focus);
  --focus-offset:3px;
  --shadow-popover:0 8px 28px #18241b26;
  --duration-fast:.15s;
}