:root {
  --clay-600: #B8552F;
  --clay-700: #9A4424;
  --clay-100: #F3DCC9;
  --cream: #FBF3E7;
  --cream-dim: #F0E4D2;
  --charcoal: #241F1C;
  --charcoal-soft: #322B26;
  --leaf-700: #2F4030;
  --leaf-500: #4A6350;
  --gold: #D4A24C;
  --gold-soft: #E8C988;
  --ink: #2A2220;
  --ink-soft: #6B5F58;
  --line: rgba(42, 34, 32, 0.12);
  --line-dark: rgba(251, 243, 231, 0.14);
  --white: #ffffff;

  --status-placed: #B8552F;
  --status-accepted: #C98B3A;
  --status-preparing: #D4A24C;
  --status-ready: #4A6350;
  --status-out: #2F4030;
  --status-done: #6B8E6F;
  --status-cancelled: #A8453D;

  --display-font: 'Fraunces', serif;
  --body-font: 'Manrope', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 2px 12px rgba(42, 34, 32, 0.08), 0 1px 2px rgba(42, 34, 32, 0.06);
  --shadow-pop: 0 8px 30px rgba(42, 34, 32, 0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body-font);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--display-font);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--body-font); cursor: pointer; }
input, select, textarea { font-family: var(--body-font); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--clay-600);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 8px; opacity: 0.4; }
::-webkit-scrollbar-track { background: transparent; }