@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Light theme harmonized with RadarEscola brand (navy + green) */
  --background: 210 40% 98%;
  --foreground: 220 65% 14%;

  --card: 0 0% 100%;
  --card-foreground: 220 65% 14%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 65% 14%;

  /* Brand navy */
  --primary: 220 70% 22%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 220 70% 32%;

  --secondary: 215 35% 94%;
  --secondary-foreground: 220 65% 14%;

  --muted: 215 30% 95%;
  --muted-foreground: 220 15% 45%;

  /* Brand green (radar) */
  --accent: 134 65% 42%;
  --accent-foreground: 0 0% 100%;
  --accent-glow: 134 70% 52%;

  --destructive: 0 75% 55%;
  --destructive-foreground: 0 0% 100%;

  --warning: 38 95% 50%;
  --success: 134 65% 42%;

  --border: 215 25% 88%;
  --input: 215 25% 88%;
  --ring: 134 65% 42%;

  --radius: 0.85rem;

  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 80% 0%, hsl(134 65% 42% / 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 30%, hsl(220 70% 22% / 0.08), transparent 60%),
    linear-gradient(180deg, hsl(210 40% 99%), hsl(210 40% 96%));
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-brand: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
  --gradient-card: linear-gradient(160deg, hsl(0 0% 100%), hsl(210 40% 98%));
  --shadow-glow: 0 20px 50px -20px hsl(var(--accent) / 0.35);
  --shadow-card: 0 10px 30px -15px hsl(220 50% 30% / 0.15);
  --shadow-soft: 0 1px 3px hsl(220 30% 20% / 0.04), 0 4px 12px hsl(220 30% 20% / 0.06);

  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 220 30% 30%;
  --sidebar-primary: 220 70% 22%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 215 35% 95%;
  --sidebar-accent-foreground: 220 70% 22%;
  --sidebar-border: 215 25% 90%;
  --sidebar-ring: 134 65% 42%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

.bg-hero { background: var(--gradient-hero); }
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-brand { background: var(--gradient-brand); }
.bg-gradient-card { background: var(--gradient-card); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-soft { box-shadow: var(--shadow-soft); }

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grid-bg {
  background-image:
    linear-gradient(hsl(220 30% 50% / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsl(220 30% 50% / 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

@keyframes radar-pulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}
@keyframes float-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-radar-pulse { animation: radar-pulse 3s ease-out infinite; }
.animate-radar-sweep { animation: radar-sweep 4s linear infinite; }
.animate-float-up { animation: float-up 0.7s ease-out both; }

/* Custom Tailwind Config simulation for CSS variables */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }