:root {
  /* Fonts */
  --font-primary: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  /* Light theme colors */
  --color-bg: #f6f1ea;
  --color-surface: #fffaf4;
  --color-surface-alt: #efe7dc;
  --color-text: #2f2f2f;
  --color-text-soft: #5f5a54;
  --color-border: #d9d0c4;
  --color-accent: #c8a96b;
  --color-accent-strong: #b8934f;
  --color-accent-contrast: #1f1f1f;
  --color-overlay: rgba(47, 47, 47, 0.08);

  /* Dark theme colors */
  --color-bg-dark: #1f1f1f;
  --color-surface-dark: #2a2a2a;
  --color-surface-alt-dark: #353535;
  --color-text-dark: #f5efe7;
  --color-text-soft-dark: #c8c0b5;
  --color-border-dark: #4a4640;
  --color-accent-dark: #d4b16f;
  --color-accent-strong-dark: #e1bd78;
  --color-accent-contrast-dark: #1b1b1b;
  --color-overlay-dark: rgba(255, 255, 255, 0.05);

  /* Active theme defaults */
  --site-bg: var(--color-bg);
  --site-surface: var(--color-surface);
  --site-surface-alt: var(--color-surface-alt);
  --site-text: var(--color-text);
  --site-text-soft: var(--color-text-soft);
  --site-border: var(--color-border);
  --site-accent: var(--color-accent);
  --site-accent-strong: var(--color-accent-strong);
  --site-accent-contrast: var(--color-accent-contrast);
  --site-overlay: var(--color-overlay);

  /* Spacing */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Sizing */
  --container-width: 1200px;
  --header-height: 88px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.12);

  /* Transition */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.35s ease;
}

body.dark-theme {
  --site-bg: var(--color-bg-dark);
  --site-surface: var(--color-surface-dark);
  --site-surface-alt: var(--color-surface-alt-dark);
  --site-text: var(--color-text-dark);
  --site-text-soft: var(--color-text-soft-dark);
  --site-border: var(--color-border-dark);
  --site-accent: var(--color-accent-dark);
  --site-accent-strong: var(--color-accent-strong-dark);
  --site-accent-contrast: var(--color-accent-contrast-dark);
  --site-overlay: var(--color-overlay-dark);
}