:root {
  /* --- Light Mode (Standard) --- */
  --color-bg: #F3F8EF;
  --color-surface: #E3EFDB;
  --color-surface-alt: #D3E8C7;
  --color-lang: #81A67CB0;
  --color-accent: #6FA971;
  --color-accent-strong: #4C8350;
  --color-text: #111111;
  --color-text-soft: #3A453D;
  --color-highlight: #C97A2B;
  --color-btn: #629E644A;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-shadow: rgba(76, 131, 80, 0.15);

  --font-display: "Limelight", serif;
  --font-second: "Fraunces", serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "Space Mono", monospace;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --radius: 18px;
  --radius-sm: 10px;
  --max-width: 1120px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-mid: 0.5s;
  --duration-slow: 1.1s;
}

[data-theme="dark"] {
  --color-bg: #121721;
  --color-surface: #1B2434;
  --color-surface-alt: #253044;
  --color-lang: #5D96FFB0;
  --color-accent: #8FB8E8;
  --color-accent-strong: #5A8FC4;
  --color-text: #E3E7EB;
  --color-text-soft: #B8C4D6;
  --color-highlight: #F0B94A;
  --color-btn: #8FB9E84A;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-shadow: rgba(0, 0, 0, 0.4);
}

html {
  transition: background-color var(--duration-mid) var(--ease);
}