/* Nuzu Marketing design tokens - mirrors src/index.css from the React app */
:root {
  --background: 220 20% 98%;
  --foreground: 224 24% 15%;
  --card: 0 0% 100%;
  --card-foreground: 224 24% 15%;
  --primary: 210 70% 20%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 210 55% 32%;
  --primary-dark: 212 75% 12%;
  --secondary: 18 95% 32%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 20 90% 42%;
  --muted: 210 20% 96%;
  --muted-foreground: 210 15% 40%;
  --accent: 18 95% 32%;
  --border: 210 20% 88%;
  --radius: 0.75rem;

  --gradient-primary: linear-gradient(135deg, hsl(var(--primary-dark)), hsl(var(--primary)));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-light)));
  --gradient-hero: linear-gradient(135deg, hsl(var(--primary-dark)) 0%, hsl(var(--primary)) 60%, hsl(var(--primary-light)) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100% / 0.9), hsl(0 0% 100% / 0.6));
  --gradient-section: radial-gradient(ellipse at center, hsl(var(--secondary) / 0.12), hsl(var(--primary) / 0.05));

  --shadow-medium: 0 10px 25px -3px hsl(var(--primary) / 0.1);
  --shadow-large: 0 25px 50px -12px hsl(var(--primary) / 0.25);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-primary { background-image: var(--gradient-primary); }
.bg-gradient-secondary { background-image: var(--gradient-secondary); }
.bg-gradient-card { background-image: var(--gradient-card); }
.bg-gradient-section { background-image: var(--gradient-section); }

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

.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; transition: all .2s ease; text-decoration: none;
}
.btn-primary { background: var(--gradient-secondary); color: hsl(var(--secondary-foreground)); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); }
.btn-glass { background: rgba(255,255,255,.1); color:#fff; backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.25); }
.btn-glass:hover { background: rgba(255,255,255,.2); }
.btn-outline { border:1px solid hsl(var(--border)); color: hsl(var(--foreground)); background: transparent; }
.btn-outline:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.btn-xl { padding: 1rem 2rem; font-size: 1.125rem; }

.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / .5);
  border-radius: 1rem; padding: 1.75rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }

.swirl-bg {
  position: absolute; inset: 0;
  background-image: url('../images/swirl-bg.jpg');
  background-size: cover; background-position: center;
  opacity: .1; pointer-events: none;
}

@keyframes nuzu-fade-in { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.animate-fade-in { animation: nuzu-fade-in .6s ease both; }