/* globals.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Bebas+Neue&display=swap');

:root {
  /* Light theme (default) */
  --background: 220 20% 97%;
  --foreground: 220 20% 10%;

  --card: 0 0% 100%;
  --card-foreground: 220 20% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 10%;

  --primary: 230 80% 55%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 15% 92%;
  --secondary-foreground: 220 20% 15%;

  --muted: 220 15% 92%;
  --muted-foreground: 220 10% 45%;

  --accent: 210 90% 50%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 15% 88%;
  --input: 220 15% 88%;
  --ring: 230 80% 55%;

  --radius: 0.75rem;

  --gradient-start: 250 80% 60%;
  --gradient-mid: 230 80% 55%;
  --gradient-end: 210 90% 50%;

  --glass-bg: 0 0% 100% / 0.7;
  --glass-border: 220 20% 10% / 0.08;
  --glass-blur: 20px;

  --glow-primary: 230 80% 55%;
  --glow-accent: 210 90% 50%;

  --hero-glow: 230 80% 85%;
}

.dark {
  /* Dark theme */
  --background: 0 0% 6%;
  --foreground: 0 0% 95%;

  --card: 0 0% 9%;
  --card-foreground: 0 0% 95%;

  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;

  --primary: 250 80% 60%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 95%;

  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 55%;

  --accent: 190 90% 50%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 250 80% 60%;

  --gradient-start: 270 80% 60%;
  --gradient-mid: 230 80% 55%;
  --gradient-end: 190 90% 50%;

  --glass-bg: 0 0% 100% / 0.05;
  --glass-border: 0 0% 100% / 0.1;
  --glass-blur: 20px;

  --glow-primary: 250 80% 60%;
  --glow-accent: 190 90% 50%;

  --hero-glow: 250 60% 30%;
}

/* CSS Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

::selection {
  background: hsl(var(--primary) / 0.3);
  color: hsl(0 0% 100%);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.5);
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
img {
  max-width: 100%;
  display: block;
}

/* Typography Helpers */
.font-display {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}