:root {
  --background: 214 42% 98%;
  --foreground: 224 29% 15%;
  --primary: 266 84% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 196 62% 90%;
  --secondary-foreground: 215 60% 18%;
  --muted: 215 28% 94%;
  --destructive: 0 78% 57%;
  --border: 220 24% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px hsla(266, 84%, 58%, 0.06);
  --shadow-md: 0 16px 40px hsla(224, 35%, 20%, 0.12);
  --shadow-lg: 0 24px 60px hsla(266, 84%, 58%, 0.18);
  --transition-fast: 120ms ease;
  --transition-smooth: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.35rem;
}

.dark {
  --background: 230 24% 10%;
  --foreground: 210 40% 96%;
  --primary: 271 88% 69%;
  --primary-foreground: 230 24% 10%;
  --secondary: 221 24% 18%;
  --secondary-foreground: 210 40% 96%;
  --muted: 222 20% 16%;
  --destructive: 0 72% 62%;
  --border: 223 18% 24%;
  --card: 228 23% 13%;
  --shadow-sm: 0 8px 20px hsla(0, 0%, 0%, 0.28);
  --shadow-md: 0 20px 46px hsla(0, 0%, 0%, 0.34);
  --shadow-lg: 0 30px 80px hsla(271, 88%, 69%, 0.22);
}

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

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, hsla(266, 84%, 58%, 0.08), transparent 30%),
    radial-gradient(circle at top right, hsla(196, 62%, 50%, 0.1), transparent 34%),
    hsl(var(--background));
}

* {
  box-sizing: border-box;
}

.hero-grid {
  background-image:
    linear-gradient(to right, hsla(220, 24%, 86%, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(220, 24%, 86%, 0.5) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3));
}

.dark .hero-grid {
  background-image:
    linear-gradient(to right, hsla(223, 18%, 24%, 0.8) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(223, 18%, 24%, 0.8) 1px, transparent 1px);
}

.resume-paper {
  font-family: Arial, Helvetica, sans-serif;
}

button, a, input, textarea {
  transition: all var(--transition-smooth);
}

::selection {
  background: hsla(266, 84%, 58%, 0.22);
}

@media (max-width: 640px) {
  .resume-paper {
    padding: 1.25rem;
  }
}