@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
   Design system — "Atelier" (premium modern commerce, any vertical)
   Palette (5 total): warm white / warm ink / deep forest / warm sand (2 tints)
   + functional destructive. Tokens only — never raw colors in components.
--------------------------------------------------------------------------- */

@layer base {
  :root {
    --background: 40 33% 98%; /* warm white */
    --foreground: 30 12% 13%; /* warm ink */
    --primary: 163 34% 21%; /* deep forest */
    --primary-foreground: 40 33% 98%;
    --secondary: 40 28% 94%; /* warm sand */
    --secondary-foreground: 30 12% 13%;
    --muted: 40 28% 94%;
    --muted-foreground: 30 8% 40%;
    --accent: 40 24% 89%; /* deeper sand (hover) */
    --accent-foreground: 30 12% 13%;
    --destructive: 0 60% 44%;
    --destructive-foreground: 40 33% 98%;
    --border: 38 18% 86%;
    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-size: 1rem;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  .font-display {
    font-family: var(--font-serif), ui-serif, Georgia, serif;
    @apply text-balance font-medium;
    line-height: 1.2;
  }

  ::selection {
    @apply bg-primary text-primary-foreground;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
  }
}

@layer components {
  /* Layout rhythm */
  /* Page container — near-full-bleed like the reference DTC sites (Mejuri /
     Missoma): generous gutters instead of a narrow boxed column, capped only
     on ultra-wide screens so lines never run away. */
  .container-page {
    @apply mx-auto w-full max-w-[105rem] px-4 sm:px-6 lg:px-10;
  }
  /* Contained variant for transactional / reading pages (cart, PDP) where
     very long lines hurt more than the full-bleed look helps. */
  .container-narrow {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }
  .section-pad {
    @apply py-14 sm:py-16 lg:py-20;
  }

  /* Small caps-like label. Latin only for the caps + tracking: Hebrew has no
     case, and letter-spacing pulls its glyphs apart, so RTL documents get the
     plain weight/size/colour and nothing else. */
  .eyebrow {
    @apply mb-3 block text-xs font-semibold uppercase tracking-widest text-primary;
  }
  [dir='rtl'] .eyebrow {
    text-transform: none;
    letter-spacing: normal;
  }

  /* Buttons */
  .btn {
    @apply inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50;
  }
  .btn-primary {
    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_10px_28px_-10px_hsl(var(--primary)/0.55)] transition-[transform,box-shadow,background-color] hover:-translate-y-0.5 hover:shadow-[0_14px_34px_-10px_hsl(var(--primary)/0.6)];
  }
  .btn-outline {
    @apply btn border border-foreground/20 bg-transparent text-foreground hover:border-foreground hover:bg-foreground hover:text-background;
  }
  .btn-soft {
    @apply btn bg-secondary text-secondary-foreground hover:bg-accent;
  }
  .btn-ghost {
    @apply btn text-foreground hover:bg-secondary;
  }
  .btn-md {
    @apply h-11 px-6;
  }
  .btn-lg {
    @apply h-12 px-8 text-base;
  }
  .btn-sm {
    @apply h-9 px-4 text-sm;
  }

  /* Cards — oversized corners + forest-tinted lift on hover */
  .card {
    @apply rounded-2xl border bg-background shadow-sm;
  }
  .card-hover {
    @apply transition-[transform,box-shadow] duration-300 hover:-translate-y-1 hover:shadow-[0_20px_45px_-18px_hsl(var(--primary)/0.35)];
  }

  /* Glassy surface (token-blended, no raw colors) */
  .glass {
    @apply rounded-2xl border border-background/60 bg-background/75 shadow-lg backdrop-blur-md;
  }

  /* Badges / pills */
  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
  }
  .badge-primary {
    @apply badge bg-primary text-primary-foreground;
  }
  .badge-soft {
    @apply badge bg-secondary text-secondary-foreground;
  }
  .badge-destructive {
    @apply badge bg-destructive/10 text-destructive;
  }

  /* Form controls */
  .input {
    @apply h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary;
  }
  .select {
    @apply h-10 rounded-full border bg-background pe-8 ps-4 text-sm font-medium text-foreground;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23413b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }
  [dir='rtl'] .select {
    background-position: left 0.75rem center;
  }

  /* Product description prose (merchant HTML) */
  .prose-store {
    @apply text-[0.95rem] leading-7 text-muted-foreground;
  }
  .prose-store p {
    @apply mb-3;
  }
  .prose-store strong {
    @apply font-semibold text-foreground;
  }
  .prose-store ul {
    @apply mb-3 list-disc ps-5;
  }
  .prose-store ol {
    @apply mb-3 list-decimal ps-5;
  }
  .prose-store a {
    @apply text-primary underline underline-offset-2;
  }
  .prose-store h1,
  .prose-store h2,
  .prose-store h3 {
    @apply mb-2 mt-4 text-foreground;
  }
}

@layer utilities {
  /* Flip directional glyphs (arrows) so they point with the reading direction */
  [dir='rtl'] .rtl-flip {
    transform: scaleX(-1);
  }

  /* --- Atmosphere washes: soft blends of the SAME tokens (forest + sand) --- */
  .wash-hero {
    background:
      radial-gradient(52rem 32rem at 85% -10%, hsl(var(--primary) / 0.1), transparent 60%),
      radial-gradient(46rem 30rem at 8% 108%, hsl(var(--primary) / 0.08), transparent 55%),
      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
  }
  [dir='rtl'] .wash-hero {
    background:
      radial-gradient(52rem 32rem at 15% -10%, hsl(var(--primary) / 0.1), transparent 60%),
      radial-gradient(46rem 30rem at 92% 108%, hsl(var(--primary) / 0.08), transparent 55%),
      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
  }
  .wash-sand {
    background: linear-gradient(
      180deg,
      hsl(var(--background)),
      hsl(var(--secondary) / 0.9) 30%,
      hsl(var(--secondary) / 0.9) 70%,
      hsl(var(--background))
    );
  }
  .wash-forest {
    background:
      radial-gradient(40rem 24rem at 20% 0%, hsl(var(--primary-foreground) / 0.12), transparent 60%),
      linear-gradient(160deg, hsl(var(--primary)), hsl(163 40% 15%));
  }

  /* Soft blurred glow blob (decorative, sits behind content) */
  .glow-blob {
    position: absolute;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.16);
    filter: blur(64px);
    pointer-events: none;
  }

  /* Marquee band — duplicated track scrolls seamlessly; guarded below */
  .marquee {
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee-track {
    display: inline-flex;
    align-items: center;
    min-width: 200%;
  }

  /* Single orchestrated reveal — guarded for reduced motion */
  .reveal {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .reveal-delay-1 {
      animation-delay: 0.12s;
    }
    .reveal-delay-2 {
      animation-delay: 0.24s;
    }
    .reveal-delay-3 {
      animation-delay: 0.36s;
    }
    .img-zoom {
      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .group:hover .img-zoom {
      transform: scale(1.045);
    }
    .spin {
      animation: spinner 0.8s linear infinite;
    }

    /* Gentle floating — hero cards & chips */
    .float-slow {
      animation: float-y 7s ease-in-out infinite;
    }
    .float-slower {
      animation: float-y 9s ease-in-out 1.2s infinite;
    }
    .blob-drift {
      animation: blob-drift 14s ease-in-out infinite alternate;
    }

    /* Scroll reveals (driven by the <Reveal> island adding .is-visible) */
    .reveal-scroll {
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .marquee-track {
      animation: marquee-ltr 32s linear infinite;
    }
    [dir='rtl'] .marquee-track {
      animation-name: marquee-rtl;
    }
  }

  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes spinner {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes float-y {
    0%,
    100% {
      transform: translateY(0) rotate(var(--float-rotate, 0deg));
    }
    50% {
      transform: translateY(-12px) rotate(var(--float-rotate, 0deg));
    }
  }

  @keyframes blob-drift {
    from {
      transform: translate(0, 0) scale(1);
    }
    to {
      transform: translate(3rem, -2rem) scale(1.15);
    }
  }

  @keyframes marquee-ltr {
    to {
      transform: translateX(-50%);
    }
  }
  @keyframes marquee-rtl {
    to {
      transform: translateX(50%);
    }
  }
}

/* Cart bump — the landing pad reacts when a flown item arrives */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cart-bump {
    30% { transform: scale(1.3); }
    60% { transform: scale(0.92); }
  }
  .cart-bump { animation: cart-bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
}

/* Full-page loader — a soft pulsing core inside a thin rotating ring
   (Atelier's breathing mark). No iconography, so it fits any store niche.
   Static ring + core under reduced motion; the spin/breathe are additive. */
.loader-ring {
  position: relative;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid hsl(var(--primary) / 0.15);
}
.loader-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  border-top-color: hsl(var(--primary) / 0.9);
}
.loader-ring-core {
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 12px hsl(var(--primary) / 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .loader-ring::before {
    animation: ring-spin 1.4s linear infinite;
  }
  .loader-ring-core {
    animation: ring-breathe 2s ease-in-out infinite;
  }
  .loader-text {
    animation: loader-breathe 2.2s ease-in-out infinite;
  }
  @keyframes ring-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes ring-breathe {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
  }
  @keyframes loader-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }
}