/* Sunrise Boost — design tokens & custom utilities (used alongside Tailwind Play CDN) */
:root {
  --radius: 0.75rem;

  /* Brand palette */
  --brand: oklch(0.65 0.12 213);
  /* #0097b2 teal */
  --brand-light: oklch(0.78 0.07 235);
  /* light blue */
  --ink: oklch(0.15 0 0);
  /* near-black */

  --background: oklch(1 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --primary: oklch(0.65 0.12 213);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.78 0.07 235);
  --secondary-foreground: oklch(0.15 0 0);
  --muted: oklch(0.97 0.005 220);
  --muted-foreground: oklch(0.45 0.02 220);
  --accent: oklch(0.78 0.07 235);
  --accent-foreground: oklch(0.15 0 0);
  --destructive: oklch(0.6 0.22 27);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.01 220);
  --input: oklch(0.9 0.01 220);
  --ring: oklch(0.65 0.12 213);
}

* {
  border-color: var(--border);
}

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

h1,
h2,
h3,
h4 {
  font-family: "Playfair Display", serif;
  letter-spacing: -0.02em;
}

.font-display {
  font-family: "Playfair Display", serif;
  letter-spacing: -0.02em;
}

.font-sans {
  font-family: "Inter", system-ui, sans-serif;
}

/* Custom brand utilities */
.bg-gradient-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}

.bg-gradient-hero {
  background: linear-gradient(
    135deg,
    oklch(0.15 0 0) 0%,
    oklch(0.25 0.05 213) 60%,
    oklch(0.45 0.1 213) 100%
  );
}

.text-gradient-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Marquee for offers bar */
@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

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

/* Hero slider entrance */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-enter {
  animation: slideInRight 0.5s ease-out;
}

/* Lucide icon default sizing safety */
[data-lucide] {
  width: 1em;
  height: 1em;
}
/* ================= MOBILE ================= */

@media (max-width: 768px) {
  section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.8rem !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.3rem !important;
  }

  p {
    font-size: 15px !important;
  }

  .grid {
    gap: 20px !important;
  }

  .rounded-2xl {
    padding: 20px !important;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  footer .flex {
    justify-content: center;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}