:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --background: 42 45% 96%;
  --foreground: 222 47% 11%;
  --card: 40 54% 99%;
  --card-foreground: 222 47% 11%;
  --popover: 40 54% 99%;
  --popover-foreground: 222 47% 11%;
  --primary: 15 76% 42%;
  --primary-foreground: 36 100% 97%;
  --secondary: 218 26% 18%;
  --secondary-foreground: 42 45% 96%;
  --muted: 38 28% 88%;
  --muted-foreground: 222 19% 36%;
  --accent: 43 80% 58%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 72% 42%;
  --destructive-foreground: 42 45% 96%;
  --success: 145 63% 31%;
  --success-foreground: 42 45% 96%;
  --warning: 34 92% 42%;
  --warning-foreground: 222 47% 11%;
  --info: 211 68% 42%;
  --info-foreground: 42 45% 96%;
  --border: 36 24% 80%;
  --input: 36 24% 80%;
  --ring: 15 76% 42%;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px hsl(var(--foreground)/0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground)/0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground)/0.12);
  --shadow-elegant: 0 20px 60px hsl(var(--primary)/0.22);
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-smooth: 300ms cubic-bezier(0.4,0,0.2,1);
}
.dark {
  --background: 222 40% 8%;
  --foreground: 42 45% 94%;
  --card: 222 34% 12%;
  --card-foreground: 42 45% 94%;
  --popover: 222 34% 12%;
  --popover-foreground: 42 45% 94%;
  --primary: 22 82% 58%;
  --primary-foreground: 222 47% 9%;
  --secondary: 40 18% 88%;
  --secondary-foreground: 222 47% 10%;
  --muted: 222 25% 18%;
  --muted-foreground: 40 17% 72%;
  --accent: 43 82% 62%;
  --accent-foreground: 222 47% 9%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 222 47% 9%;
  --success: 145 58% 48%;
  --success-foreground: 222 47% 9%;
  --warning: 36 92% 60%;
  --warning-foreground: 222 47% 9%;
  --info: 211 78% 62%;
  --info-foreground: 222 47% 9%;
  --border: 222 21% 24%;
  --input: 222 21% 24%;
  --ring: 22 82% 58%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }
button { min-height: 44px; }
.safe-bottom { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.court-grid-bg {
  background-image: linear-gradient(hsl(var(--border)/0.35) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border)/0.35) 1px, transparent 1px);
  background-size: 32px 32px;
}
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));
}