:root {
  --color-primary: #B48954;
  --color-secondary: #F1E0CE;
  --color-surface: #D4C7B4;
  --color-background: #FAF9F4;
  --color-text: #2B2B2B;
  --color-muted: #666666;
  --color-white: #FFFFFF;
  --color-danger: #B3261E;
  --color-success: #1B5E20;
  --color-button: var(--color-primary);
  --color-button-text: var(--color-white);

  --font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --radius: 8px;
  --max-width: 1200px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.5;
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

.btn-primary {
  background: var(--color-button);
  color: var(--color-button-text);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover { opacity: 0.9; }

.empty-state {
  background: var(--color-white);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}