:root {
  color-scheme: light dark;

  /* Light theme palette */
  --color-bg-main-light: #f5efe7;
  --color-bg-panel-light: #ffffff;
  --color-border-panel-light: #d2c4b5;
  --color-border-item-light: #d2c4b5;
  --color-text-main-light: #2e261d;
  --color-text-muted-light: #736659;
  --color-accent-light: #b67635;
  --color-accent-soft-light: #8b6a4a;
  --color-border-photo-light: #c9b39b;

  /* Dark theme palette */
  --color-bg-main-dark: #494238;
  --color-bg-panel-dark: #37312a;
  --color-border-panel-dark: #685c4d;
  --color-border-item-dark: #494238;
  --color-text-main-dark: #e7c59b;
  --color-text-muted-dark: #817767;
  --color-accent-dark: #c89b65;
  --color-accent-soft-dark: #766858;
  --color-border-photo-dark: #7a6955;

  /* Active theme tokens (default: light) */
  --color-bg-main: var(--color-bg-main-light);
  --color-bg-panel: var(--color-bg-panel-light);
  --color-border-panel: var(--color-border-panel-light);
  --color-border-item: var(--color-border-item-light);
  --color-text-main: var(--color-text-main-light);
  --color-text-muted: var(--color-text-muted-light);
  --color-accent: var(--color-accent-light);
  --color-accent-soft: var(--color-accent-soft-light);
  --color-border-photo: var(--color-border-photo-light);

  --space-page-block: 60px;
  --space-page-inline: 20px;

  --font-body: "Lato", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-main: #494238;
    --color-bg-panel: #37312a;
    --color-border-panel: #685c4d;
    --color-border-item: #494238;
    --color-text-main: #e7c59b;
    --color-text-muted: #817767;
    --color-accent: #c89b65;
    --color-accent-soft: #766858;
    --color-border-photo: #7a6955;
  }
}

body {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  margin-block: var(--space-page-block);
  margin-inline: var(--space-page-inline);
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
}

h1 {
  font-family: var(--font-heading);
}