:root {
  --background: 34 38% 96%;
  --foreground: 25 32% 13%;
  --primary: 24 68% 36%;
  --primary-foreground: 36 48% 96%;
  --secondary: 41 42% 83%;
  --secondary-foreground: 25 32% 13%;
  --muted: 34 24% 88%;
  --muted-foreground: 27 14% 42%;
  --destructive: 6 68% 45%;
  --destructive-foreground: 36 48% 96%;
  --border: 31 24% 78%;
  --card: 35 42% 99%;
  --shadow-sm: 0 2px 10px hsl(25 32% 13% / 0.08);
  --shadow-md: 0 14px 34px hsl(25 32% 13% / 0.12);
  --shadow-lg: 0 24px 70px hsl(25 32% 13% / 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 24 28% 9%;
  --foreground: 36 42% 92%;
  --primary: 27 74% 58%;
  --primary-foreground: 24 28% 9%;
  --secondary: 28 22% 20%;
  --secondary-foreground: 36 42% 92%;
  --muted: 27 18% 18%;
  --muted-foreground: 34 18% 70%;
  --destructive: 4 72% 62%;
  --destructive-foreground: 24 28% 9%;
  --border: 29 18% 28%;
  --card: 25 28% 12%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at top left, hsl(var(--secondary) / 0.65), transparent 34rem),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted)));
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
.safe-bottom { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.leather-grain {
  background-image:
    radial-gradient(circle at 20% 20%, hsl(35 70% 70% / 0.22), transparent 10rem),
    radial-gradient(circle at 80% 10%, hsl(15 65% 32% / 0.18), transparent 9rem),
    linear-gradient(135deg, hsl(24 58% 31%), hsl(32 46% 18%));
}
.stitch {
  background-image: repeating-linear-gradient(90deg, hsl(36 62% 83% / .8) 0 10px, transparent 10px 18px);
}
.focus-ring:focus-visible {
  outline: 3px solid hsl(var(--primary) / .35);
  outline-offset: 3px;
}