:root {
  --radius: 0.375rem;
  --background: oklch(0.985 0.005 60);
  --foreground: oklch(0.15 0.01 30);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 30);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 30);
  
  /* Bell red (#E2231A approx) */
  --primary: oklch(0.58 0.215 27);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0.01 60);
  --secondary-foreground: oklch(0.15 0.01 30);
  --muted: oklch(0.95 0.005 60);
  --muted-foreground: oklch(0.45 0.01 30);
  --accent: oklch(0.92 0.05 25);
  --accent-foreground: oklch(0.15 0.01 30);
  --destructive: oklch(0.58 0.245 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.9 0.01 30);
  --input: oklch(0.9 0.01 30);
  --ring: oklch(0.58 0.215 27);

  --bell: oklch(0.58 0.215 27);
  --bell-soft: oklch(0.78 0.13 25);

  --font-display: "Oswald", "Impact", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

.dark {
  --background: oklch(0.12 0.01 30);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.18 0.01 30);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.18 0.01 30);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.62 0.22 27);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.22 0.01 30);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.22 0.01 30);
  --muted-foreground: oklch(0.7 0.01 30);
  --accent: oklch(0.3 0.05 25);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.62 0.24 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.62 0.22 27);
}

/* Base resets & typography */
* {
  border-color: var(--border);
}

html, body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Wave animations */
@keyframes wave-shift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.wave-anim {
  animation: wave-shift 18s linear infinite;
}

.wave-anim-slow {
  animation: wave-shift 28s linear infinite;
}

.wave-anim-fast {
  animation: wave-shift 12s linear infinite;
}

@keyframes wave-reveal {
  0% { transform: translateY(0); }
  100% { transform: translateY(-110%); }
}

.wave-reveal {
  animation: wave-reveal 1.6s cubic-bezier(0.7, 0, 0.3, 1) 0.6s forwards;
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Utilities */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}