:root {
  --bg-primary: #1a1410;
  --bg-secondary: #231c15;
  --bg-card: rgba(42, 33, 24, 0.85);
  --bg-card-hover: rgba(50, 39, 28, 0.92);
  --bg-input: rgba(35, 28, 21, 0.9);
  --bg-overlay: rgba(26, 20, 16, 0.95);

  --amber: #c8842a;
  --amber-light: #d4a94c;
  --amber-glow: rgba(200, 132, 42, 0.25);
  --amber-subtle: rgba(200, 132, 42, 0.1);
  --gold: #d4a94c;
  --cream: #f5ead6;
  --cream-muted: rgba(245, 234, 214, 0.7);
  --cream-faint: rgba(245, 234, 214, 0.4);
  --burgundy: #8b3a4a;
  --burgundy-muted: rgba(139, 58, 74, 0.4);

  --rating-down: #c0392b;
  --rating-neutral: #95a5a6;
  --rating-up: #27ae60;
  --rating-heart: #e84393;

  --danger: #c0392b;
  --danger-bg: rgba(192, 57, 43, 0.15);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-fab: 0 6px 28px rgba(200, 132, 42, 0.35);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.5);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Outfit', sans-serif;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--cream);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Warm ambient gradient */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 132, 42, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(139, 58, 74, 0.05) 0%, transparent 50%);
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 100dvh;
  position: relative;
}

a {
  color: var(--amber);
  text-decoration: none;
}

input,
button,
textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input::placeholder {
  color: var(--cream-faint);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--amber-subtle);
  border-radius: var(--radius-pill);
}

/* Selection */
::selection {
  background: var(--amber);
  color: var(--bg-primary);
}