@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  --background: #ffffff;
  --background: oklch(1 0 0);

  --foreground: #1c2b26;
  --foreground: oklch(0.24 0.03 155);

  --card: #ffffff;
  --card: oklch(1 0 0);

  --card-foreground: #1c2b26;
  --card-foreground: oklch(0.24 0.03 155);

  --popover: #ffffff;
  --popover: oklch(1 0 0);

  --popover-foreground: #1c2b26;
  --popover-foreground: oklch(0.24 0.03 155);

  --primary: #0d9488;
  --primary: oklch(0.53 0.13 155);

  --primary-foreground: #f0fdf4;
  --primary-foreground: oklch(0.99 0.01 150);

  --secondary: #e6f4ed;
  --secondary: oklch(0.96 0.03 152);

  --secondary-foreground: #134e3a;
  --secondary-foreground: oklch(0.35 0.09 155);

  --muted: #f0f7f3;
  --muted: oklch(0.97 0.01 150);

  --muted-foreground: #52796f;
  --muted-foreground: oklch(0.53 0.02 155);

  --accent: #e2f2e9;
  --accent: oklch(0.95 0.04 152);

  --accent-foreground: #134e3a;
  --accent-foreground: oklch(0.35 0.09 155);

  --border: #e2ece7;
  --border: oklch(0.92 0.02 150);

  --input: #e2ece7;
  --input: oklch(0.92 0.02 150);

  --ring: #0d9488;
  --ring: oklch(0.53 0.13 155);

  --brand: #0d9488;
  --brand: oklch(0.53 0.13 155);

  --brand-foreground: #f0fdf4;
  --brand-foreground: oklch(0.99 0.01 150);

  --brand-dark: #114b3e;
  --brand-dark: oklch(0.33 0.09 156);

  --brand-light: #34d399;
  --brand-light: oklch(0.72 0.17 148);

  --brand-soft: #e2f2e9;
  --brand-soft: oklch(0.95 0.04 152);

  --mint: #ebf7f1;
  --mint: oklch(0.97 0.03 155);

  --gold: #f59e0b;
  --gold: oklch(0.86 0.15 88);

  --gold-foreground: #78350f;
  --gold-foreground: oklch(0.32 0.08 70);

  --emergency: #ef4444;
  --emergency: oklch(0.57 0.22 27);

  --emergency-foreground: #ffffff;
  --emergency-foreground: oklch(0.99 0 0);

  --surface-soft: #f4faf6;
  --surface-soft: oklch(0.98 0.01 120);

  --gradient-hero: linear-gradient(
    100deg,
    rgba(17, 75, 62, 0.94) 0%,
    rgba(17, 75, 62, 0.78) 42%,
    rgba(17, 75, 62, 0.15) 78%
  );
  --gradient-hero: linear-gradient(
    100deg,
    oklch(0.24 0.06 156 / 0.94) 0%,
    oklch(0.3 0.08 156 / 0.78) 42%,
    oklch(0.3 0.08 156 / 0.15) 78%
  );

  --gradient-band: linear-gradient(180deg, var(--mint) 0%, #f0fdf4 100%);
  --shadow-card: 0 1px 2px rgba(28, 43, 38, 0.04), 0 8px 24px -12px rgba(28, 43, 38, 0.14);
  --shadow-raised: 0 12px 40px -16px rgba(17, 75, 62, 0.3);
}

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
}

.surface-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.band-mint {
  background-image: var(--gradient-band);
}

.hero-scrim {
  background-image: var(--gradient-hero);
}

/* Lucide Icon Size Helper Classes */
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.size-4 { width: 1rem; height: 1rem; }
.size-5 { width: 1.25rem; height: 1.25rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.size-7 { width: 1.75rem; height: 1.75rem; }
.size-9 { width: 2.25rem; height: 2.25rem; }
.size-10 { width: 2.5rem; height: 2.5rem; }
.size-11 { width: 2.75rem; height: 2.75rem; }
.size-12 { width: 3rem; height: 3rem; }
.size-14 { width: 3.5rem; height: 3.5rem; }
.size-full { width: 100%; height: 100%; }

/* Scroll behavior smooth for anchor links */
html {
  scroll-behavior: smooth;
}

/* Mobile Bottom Floating Nav Enhancements */
#mobile-bottom-nav {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.mobile-bottom-nav-item:active {
  transform: scale(0.92);
}

@keyframes sirenGlow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.8));
  }
}

.animate-siren-glow {
  animation: sirenGlow 1.8s infinite ease-in-out;
}