:root {
  --background: 42 40% 96%;
  --foreground: 210 20% 15%;
  --primary: 25 88% 52%;
  --secondary: 148 32% 38%;
  --muted: 38 24% 88%;
  --destructive: 4 72% 52%;
  --border: 30 20% 80%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsla(210, 24%, 12%, 0.08);
  --shadow-md: 0 14px 36px hsla(210, 24%, 12%, 0.12);
  --shadow-lg: 0 24px 56px hsla(25, 80%, 18%, 0.22);
  --transition-fast: 140ms ease;
  --transition-smooth: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 210 22% 10%;
  --foreground: 42 30% 94%;
  --primary: 25 90% 58%;
  --secondary: 148 36% 46%;
  --muted: 215 18% 18%;
  --destructive: 4 78% 60%;
  --border: 214 18% 24%;
  --card: 214 20% 14%;
  --shadow-sm: 0 8px 24px hsla(0, 0%, 0%, 0.24);
  --shadow-md: 0 16px 42px hsla(0, 0%, 0%, 0.28);
  --shadow-lg: 0 26px 60px hsla(25, 85%, 10%, 0.35);
}

* {
  box-sizing: border-box;
}

html, body, #root {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, hsla(var(--primary), 0.12), transparent 28%),
    radial-gradient(circle at top right, hsla(var(--secondary), 0.12), transparent 22%),
    hsl(var(--background));
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
}

::selection {
  background: hsla(var(--primary), 0.22);
}

.surface-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.surface-glass {
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.72), hsla(0, 0%, 100%, 0.58));
  border: 1px solid hsla(var(--border), 0.8);
  backdrop-filter: blur(12px);
}

.dark .surface-glass {
  background: linear-gradient(180deg, hsla(214, 20%, 18%, 0.74), hsla(214, 20%, 14%, 0.64));
}

.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.page-shell {
  width: min(1280px, calc(100% - 1.25rem));
  margin: 0 auto;
}

@media (min-width: 640px) {
  .page-shell {
    width: min(1280px, calc(100% - 2rem));
  }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.skeleton {
  animation: pulse-soft 1.6s ease-in-out infinite;
  background: linear-gradient(90deg, hsla(var(--muted), 0.8), hsla(var(--muted), 0.46), hsla(var(--muted), 0.8));
  background-size: 200% 100%;
}