/* Theme variables (dark) */
:root,
.dark {
  --background: 0 0% 4%;
  --foreground: 0 0% 95%;
  --card: 0 0% 7%;
  --card-foreground: 0 0% 95%;
  --primary: 43 55% 58%;
  --primary-foreground: 0 0% 5%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 65%;
  --border: 0 0% 15%;
  --ring: 43 55% 58%;
}

/* Base */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body *::selection,
body::selection {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Semantic utilities for theme */
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.border-primary { border-color: hsl(var(--primary)); }

/* Opacity variants */
.border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.bg-primary\/5 { background-color: hsl(var(--primary) / 0.05); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-primary\/20 { background-color: hsl(var(--primary) / 0.2); }
.bg-primary\/30 { background-color: hsl(var(--primary) / 0.3); }
.bg-primary\/50 { background-color: hsl(var(--primary) / 0.5); }
.bg-white\/\[0\.02\] { background-color: rgba(255, 255, 255, 0.02); }
.bg-card\/50 { background-color: hsl(var(--card) / 0.5); }
.text-primary\/20 { color: hsl(var(--primary) / 0.2); }
.text-foreground\/90 { color: hsl(var(--foreground) / 0.9); }
.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }
.hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); }
.hover\:border-primary\/50:hover { border-color: hsl(var(--primary) / 0.5); }

/* Gradient (primary to amber) */
.bg-gradient-to-r.from-primary.to-amber-200 {
  background-image: linear-gradient(to right, hsl(var(--primary)), rgb(253 230 138));
}
.bg-gradient-to-tr.from-background.via-transparent.to-transparent {
  background-image: linear-gradient(to top right, hsl(var(--background)), transparent, transparent);
}
.bg-\[radial-gradient\(ellipse_at_top\,_var\(--tw-gradient-stops\)\)\].from-primary\/5.via-background.to-background {
  background-image: radial-gradient(ellipse at top, hsl(var(--primary) / 0.05), hsl(var(--background)), hsl(var(--background)));
}

/* Custom utilities */
.hover-elevate:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.active-elevate-2:active { transform: translateY(0); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-xs { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.active\:shadow-none:active { box-shadow: none; }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bg-background\/90 { background-color: hsl(var(--background) / 0.9); }

/* Blur for hero glow */
.blur-\[120px\] { filter: blur(120px); }

/* Focus ring */
.focus-visible\:outline-none:focus-visible { outline: none; }
.focus-visible\:ring-1:focus-visible { box-shadow: 0 0 0 1px hsl(var(--ring)); }
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: hsl(var(--ring)); }

/* Group hover */
.group:hover .group-hover\:text-primary { color: hsl(var(--primary)); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }

/* Mobile nav - closed by default, open on hamburger click */
.mobile-nav {
  display: none;
  flex-direction: column;
}
.mobile-nav.open {
  display: flex !important;
}

@media (min-width: 768px) {
  .mobile-nav { display: none !important; }
}