:root {
  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-display: clamp(1.6rem, 4vw, 3rem);
  --text-h5: 1.05rem;
  --text-md: 1rem;
  --text-base: 0.95rem;
  --text-sm: 0.875rem;
  --text-xs: 0.72rem;
  --text-tiny: 0.68rem;

  --leading-tight: 1.1;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-loose: 1.7;

  --color-body-bg: #333333;
  --color-page-bg: #F2F2F2;
  --color-card-bg: #FFFFFF;
  --color-card-border: #E0E0E0;
  --color-tab-bar-bg: #F9F9F9;
  --color-rule: #E0E0E0;
  --color-page-border: #555555;

  --color-text: #1A1A1A;
  --color-text-muted: #666666;
  --color-text-soft: #888888;
  --color-text-faint: #AAAAAA;
  --color-text-on-dark: #FFFFFF;

  --color-accent: #C2542A;
  --color-accent-hover: #9E4221;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --container: 1200px;
  --measure: 65ch;

  --radius-card: 10px;
  --radius-sm: 6px;
  --radius-md: 8px;

  --shadow-page: -5px 0 5px rgba(0, 0, 0, 0.3), 5px 0 5px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.1);

  --duration-quick: 160ms;
  --duration: 240ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}