/* ==========================================================================
   낮은울타리교회 · Low Fence Church
   Design Tokens · Edition 1.1
   ========================================================================== */

:root {
  /* —— Color · Brand ————————————————————————————————— */
  --color-deep-ink: #1A1F2E;
  --color-warm-cream: #F4EFE4;
  --color-moss-green: #4A6B4D;
  --color-stone-gray: #9A9591;

  /* —— Color · Semantic (Light / 기본) ——————————————————————— */
  --bg: var(--color-warm-cream);
  --bg-elevated: #FAF7EF;
  --bg-inverted: var(--color-deep-ink);
  --fg: var(--color-deep-ink);
  --fg-muted: var(--color-stone-gray);
  --fg-inverted: var(--color-warm-cream);
  --accent: var(--color-moss-green);
  --rule: rgba(26, 31, 46, 0.12);
  --rule-strong: rgba(26, 31, 46, 0.28);
  --surface: rgba(26, 31, 46, 0.03);
  --surface-hover: rgba(26, 31, 46, 0.06);

  /* —— Typography —————————————————————————————————— */
  --font-sans: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --fs-display: 48px;
  --fs-h1: 34px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-label: 11px;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.15em;
  --tracking-wider: 0.25em;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* —— Spacing (8px baseline, editorial rhythm) ———————————— */
  --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;
  --space-11: 160px;

  /* —— Layout ———————————————————————————————————— */
  --container-max: 1200px;
  --container-narrow: 840px;
  --sidebar-w: 260px;
  --header-h: 72px;

  /* —— Borders & corners ——————————————————————————————— */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* —— Motion ———————————————————————————————————— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* —— Dark mode ————————————————————————————————————— */
:root[data-theme="dark"] {
  --bg: var(--color-deep-ink);
  --bg-elevated: #232836;
  --bg-inverted: var(--color-warm-cream);
  --fg: var(--color-warm-cream);
  --fg-muted: #8B867F;
  --fg-inverted: var(--color-deep-ink);
  --rule: rgba(244, 239, 228, 0.12);
  --rule-strong: rgba(244, 239, 228, 0.28);
  --surface: rgba(244, 239, 228, 0.04);
  --surface-hover: rgba(244, 239, 228, 0.08);
}