@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap");

:root {
  --primary: #8c5b3c;
  --accent: #c57b45;
  --accent2: #3d5a3a;
  --light: #f8f6f2;
  --dark: #171412;
  --mid: #6e6a66;
  --border: rgba(0,0,0,0.1);
  --font: 'Inter', sans-serif;
  --max: 1160px;

  /* Semantic tokens — light mode */
  --bg: var(--light);
  --bg-surface: #fff;
  --fg: var(--dark);
  --fg-muted: var(--mid);
  --border-subtle: var(--border);
}

[data-theme="dark"] {
  --bg: #111110;
  --bg-surface: #1c1b19;
  --fg: #e8e4de;
  --fg-muted: rgba(255,255,255,0.58);
  --mid: #999590;
  --border-subtle: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #111110;
    --bg-surface: #1c1b19;
    --fg: #e8e4de;
    --fg-muted: rgba(255,255,255,0.58);
    --mid: #999590;
    --border-subtle: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.08);
  }
}