@import "tailwindcss";

/* ---------------------------------------------------------
   Wowsie design tokens
   Bold editorial black / white / red. No soft pastel defaults.
--------------------------------------------------------- */
@theme {
  --color-black: #000000;
  --color-ink: #111111;
  --color-red: #d32528;
  --color-red-dark: #a91e21;
  --color-white: #ffffff;
  --color-paper: #f7f5f2;
  --color-graphite: #4a4a4a;
  --color-mist: #e4e1dc;
  --color-mist-dark: #cfcbc3;

  --font-display: var(--font-montserrat), "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius-sharp: 2px;
  --radius-soft: 4px;

  --container-page: 1440px;

  --animate-marquee: marquee 14s linear infinite;
  --animate-marquee-reverse: marquee-reverse 14s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@layer base {
  * {
    border-color: var(--color-mist);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

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

  a {
    color: inherit;
  }

  ::selection {
    background-color: var(--color-red);
    color: var(--color-white);
  }

  :focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
  }
}

@layer utilities {
  .container-page {
    max-width: var(--container-page);
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  @media (min-width: 768px) {
    .container-page {
      padding-inline: 2.5rem;
    }
  }

  @media (min-width: 1280px) {
    .container-page {
      padding-inline: 4rem;
    }
  }

  .text-balance {
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes slider-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes testimonial-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}