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

:root {
  --background: 0 0% 100%;
  --foreground: 210 40% 11%;
  --card: 210 40% 98%;
  --card-foreground: 210 40% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 40% 11%;
  --primary: 176 72% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 25% 96%;
  --secondary-foreground: 210 40% 11%;
  --muted: 210 20% 95%;
  --muted-foreground: 210 15% 50%;
  --accent: 176 72% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 20% 91%;
  --input: 210 20% 91%;
  --ring: 176 72% 40%;
  --radius: 0.75rem;

  /* Custom tokens */
  --surface-elevated: 210 25% 99%;
  --heading: 210 50% 12%;
  --text-subtle: 210 15% 50%;
  --brand-teal: 176 72% 40%;
  --brand-teal-light: 176 50% 95%;
  --brand-dark: 210 50% 12%;
  --hero-dark: 210 50% 15%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", system-ui, sans-serif;
  margin: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: hsl(var(--heading));
}

/* Animations replacements for Framer Motion */
.fade-up-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up-element.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-right-element {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-right-element.visible {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu {
  display: none;
  opacity: 0;
  height: 0;
  transition: opacity 0.3s ease, height 0.3s ease;
  overflow: hidden;
}

.mobile-menu.open {
  display: block;
  opacity: 1;
  height: auto;
}