:root {
  /* Colors */
  --color-primary: #d48806;
  --color-accent: #c2410c;
  --color-bg: #fdf7ed;
  --color-text: #2d2a32;
  --color-surface: #fffaf3;
  --color-muted: #6b6770;
  --color-border: #e8dfcf;
  --color-primary-hover: #b06f04;
  --color-accent-hover: #9a3309;
  --color-disabled: #d7cfbf;
  --color-danger: #d1434b;
  --color-success: #3aa981;

  /* Typography */
  --font-family: 'Cinzel Decorative', 'Segoe UI', sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height: 1.6;

  /* Radius & shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.2);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Layout helpers */
.section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  color: var(--color-text);
  border: 1px solid var(--color-border, #1f2937);
}

.card--hover {
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease, transform 120ms ease;
}

.btn:disabled {
  background: var(--color-disabled);
  color: #d1d5db;
  cursor: not-allowed;
}

.btn-primary {
  background: #ffffff;
  color: #111827;
  border-color: var(--color-border);
}

.btn-primary:hover {
  background: #f3f4f6;
}

.btn-secondary {
  background: var(--color-accent);
  color: #111827;
}

.btn-secondary:hover {
  background: var(--color-accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Forms */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--color-text);
  margin-left: 0.5rem
}

.form-control {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: #111827;
}

.form-control--sm {
  padding: 6px 8px;
  height: 32px;
}

.form-help {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.form-error {
  color: var(--color-danger);
  font-size: 0.8rem;
}