/* ==========================================================================
   Design Tokens & Color Palette
   Clean, modern, editorial aesthetic with paper-tinted neutrals,
   deep ink, refined teal accent, and precise typography hierarchy.
   ========================================================================== */

:root {
  /* Color Palette */
  --color-bg: #f8f8f5;
  --color-surface: #ffffff;
  --color-surface-hover: #fafaf8;
  --color-ink: #141619;
  --color-ink-light: #2c3036;
  --color-muted: #5e636e;
  --color-faint: #8e939e;
  --color-line: #e4e3dd;
  --color-line-subtle: #eeede7;
  
  /* Accent */
  --color-accent: #245852;
  --color-accent-hover: #1b4540;
  --color-accent-soft: #e5f0ed;
  --color-accent-ink: #13332f;

  /* Terminal Theme */
  --terminal-bg: #131518;
  --terminal-text: #e2e4e9;
  --terminal-dim: #717784;
  --terminal-add: #6ee7b7;
  --terminal-remove: #fca5a5;

  /* Typography */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --fs-hero: clamp(2.2rem, 3.8vw + 1rem, 3.4rem);
  --fs-h1: clamp(1.8rem, 2.4vw + 0.8rem, 2.5rem);
  --fs-h2: clamp(1.35rem, 1.4vw + 0.6rem, 1.75rem);
  --fs-h3: 1.125rem;
  --fs-body: 0.965rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.785rem;

  /* Line Heights */
  --lh-tight: 1.18;
  --lh-normal: 1.65;
  --lh-loose: 1.8;

  /* Spacing Scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4.5rem;   /* 72px */
  --space-9: 6rem;     /* 96px */

  /* Layout Widths (Centered & Proportional) */
  --container-width: 760px;
  --container-narrow: 680px;

  /* Borders & Radius */
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Transitions & Shadows */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --shadow-sm: 0 1px 2px rgba(20, 22, 25, 0.04);
  --shadow-md: 0 4px 14px -4px rgba(20, 22, 25, 0.08), 0 1px 3px rgba(20, 22, 25, 0.04);
}