:root {
  /* === Colors — Light theme === */
  --bg: #F4F0E8;
  --bg-elevated: #FBF8F2;
  --bg-section: #EDE7DB;
  --bg-dark: #1A1A1A;

  --ink: #1A1A1A;
  --ink-soft: #4A4843;
  --ink-mute: #8A857B;

  --line: #D9D2C5;
  --line-strong: #B8B0A0;

  --accent: #3D4F3F;
  --accent-soft: #5C7060;
  --accent-ink: #F4F0E8;

  --on-dark: #F4F0E8;
  --on-dark-mute: #B8B0A0;

  /* === Type === */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 80px;
  --fs-6xl: 120px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* === Layout === */
  --container: 1440px;
  --container-narrow: 1200px;
  --gutter: 32px;
  --gutter-sm: 20px;

  /* === Radius === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* === Motion === */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-md: 400ms;
  --dur-slow: 700ms;

  /* === Shadow (used sparingly) === */
  --shadow-soft: 0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
  --shadow-lift: 0 2px 8px rgba(26,26,26,.06), 0 24px 48px rgba(26,26,26,.10);
}

[data-theme="dark"] {
  --bg: #0F0F0E;
  --bg-elevated: #1A1A18;
  --bg-section: #181816;
  --bg-dark: #0A0A09;

  --ink: #EFEAE0;
  --ink-soft: #C5BFB2;
  --ink-mute: #8A857B;

  --line: #2A2925;
  --line-strong: #3D3B36;

  --accent: #C9A961;
  --accent-soft: #B89856;
  --accent-ink: #0F0F0E;

  --on-dark: #EFEAE0;
  --on-dark-mute: #8A857B;
}