/* Storefront shell: base + luxe components + home/hero utilities. Fonts in fonts-deferred.css. */
@config "../../tailwind.storefront-shell.config.js";

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

@layer base {
  :root {
    color-scheme: light;
  }
  html {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Dynamic viewport: avoids 100vh jump when mobile browser chrome shows/hides */
    min-height: 100dvh;
  }
  body {
    overflow-x: hidden;
    min-width: 0;
  }

  html.sk-scroll-lock,
  html.sk-scroll-lock body {
    overflow: hidden;
  }

  /*
   * Public storefront (body.storefront-site is toggled from AppLayout): native <select>
   * often paints the option list with a light surface while inheriting light text — unreadable.
   * color-scheme + explicit surfaces fix closed state; options where the UA allows styling.
   */
  body.storefront-site {
    color-scheme: light;
    @apply bg-luxe-obsidian text-luxe-ink;
  }
  body.storefront-site select {
    background-color: #ffffff;
    color: #14110e;
  }
  body.storefront-site select option,
  body.storefront-site select optgroup {
    background-color: #ffffff;
    color: #14110e;
  }

  /* Hero copy panel: always light surface + dark text (site light theme) */
  body.storefront-site .room-hero .lcp-hero__panel,
  body.storefront-site #lcp-room-hero .lcp-hero__panel {
    color: #14110e;
  }
  body.storefront-site .room-hero .lcp-hero__panel .luxe-title,
  body.storefront-site #lcp-room-hero .lcp-hero__panel .luxe-title {
    @apply text-luxe-ink;
  }
  body.storefront-site .room-hero .lcp-hero__panel .luxe-kicker,
  body.storefront-site #lcp-room-hero .lcp-hero__panel .luxe-kicker {
    @apply text-luxe-mist tracking-[0.35em];
  }
  body.storefront-site .room-hero .lcp-hero__panel p,
  body.storefront-site #lcp-room-hero .lcp-hero__panel p {
    color: rgba(28, 25, 23, 0.85);
  }
}

@layer components {
  /* Luxury UI primitives (public) */
  .luxe-container { @apply mx-auto w-full min-w-0 max-w-7xl px-3 xs:px-4 sm:px-6 lg:px-8; }

  .luxe-surface {
    @apply border border-stone-200/70 bg-white/95 shadow-luxe backdrop-blur-xl;
  }
  .luxe-surface-strong {
    @apply border border-stone-200/70 bg-white shadow-luxe-lg backdrop-blur-2xl;
  }
  .luxe-hairline { @apply border border-stone-200/80; }
  .luxe-muted { @apply text-luxe-mist; }
  .luxe-title { @apply font-display tracking-tight text-luxe-ink; }
  .luxe-kicker { @apply text-[11px] font-semibold uppercase tracking-[0.38em] text-luxe-mist; }

  /* Premium section header — centered editorial block */
  .luxe-section-head { @apply mx-auto max-w-2xl text-center; }
  .luxe-section-head .luxe-title { @apply mt-3 text-2xl font-semibold sm:text-3xl md:text-4xl; }
  .luxe-section-head .luxe-section-sub { @apply mt-3 text-sm leading-relaxed text-luxe-mist sm:text-base; }
  .luxe-section-rule {
    @apply mx-auto mt-5 h-px w-16 bg-gradient-to-r from-transparent via-luxe-gold/80 to-transparent sm:mt-6 sm:w-20;
  }

  /* Unified product card */
  .luxe-product-card {
    @apply relative flex min-h-0 flex-col overflow-hidden rounded-2xl border border-stone-200/70 bg-white shadow-luxe transition-all duration-500 ease-out hover:-translate-y-1 hover:border-luxe-gold/35 hover:shadow-luxe-lg sm:rounded-3xl;
  }
  .luxe-product-card__media { @apply relative aspect-[4/3] w-full overflow-hidden bg-luxe-graphite; }
  .luxe-product-card__body { @apply flex min-h-0 flex-1 flex-col p-3 sm:p-4; }

  /* Skeleton shimmer — images + card placeholders */
  .sk-skeleton {
    background: linear-gradient(
      90deg,
      rgb(247 244 239 / 0.95) 0%,
      rgb(255 255 255 / 1) 45%,
      rgb(247 244 239 / 0.95) 90%
    );
    background-size: 200% 100%;
    animation: sk-skeleton-shimmer 1.15s ease-in-out infinite;
  }
  @keyframes sk-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sk-skeleton {
      animation: none;
      background: rgb(247 244 239 / 0.98);
    }
  }
  .sk-img:where(:not([class*='absolute'])) {
    display: block;
    width: 100%;
    height: 100%;
  }

  .luxe-btn {
    @apply relative inline-flex min-h-[48px] items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-luxe-gold/70 focus:ring-offset-2 focus:ring-offset-luxe-obsidian;
  }
  .luxe-btn-primary {
    background: linear-gradient(135deg, #d4b872 0%, #a67c2e 50%, #8b6914 100%);
    @apply text-black shadow-md shadow-luxe-gold/25 hover:brightness-105 hover:shadow-lg hover:shadow-luxe-gold/30 active:scale-[0.98];
  }
  .luxe-btn-ghost {
    @apply border border-stone-300/70 bg-white text-luxe-ink shadow-sm hover:border-luxe-gold/40 hover:bg-luxe-ivory;
  }
  .luxe-btn-icon {
    @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-stone-200/80 bg-white text-luxe-ink shadow-sm transition hover:border-luxe-gold/35 hover:text-luxe-gold;
  }

  /* Alternating section backgrounds */
  .luxe-section--cream { @apply bg-luxe-obsidian; }
  .luxe-section--ivory { @apply bg-luxe-ivory; }
  .luxe-section--graphite { @apply bg-luxe-graphite; }

  .hero-ctas { @apply flex flex-col gap-2.5 xs:flex-row xs:flex-wrap sm:gap-3; }
  .hero-ctas .luxe-btn { @apply w-full justify-center xs:w-auto; }
  .hero-category-chips { @apply min-h-9 sm:min-h-10; }
  .hero-category-chips--empty { @apply min-h-0; }

  html.sk-hydrated .home-section-defer {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
  }

  @media (max-width: 767px) {
    .luxe-surface-strong {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgb(255 255 255 / 0.97);
    }
  }

  .luxe-input {
    @apply w-full rounded-2xl border border-stone-300/70 bg-white px-4 py-3 text-sm text-luxe-ink shadow-sm placeholder:text-luxe-mist/70 focus:border-luxe-gold/50 focus:ring-1 focus:ring-luxe-gold/40;
  }

  /* Site header accent */
  .site-header {
    @apply sticky top-0 z-50 w-full border-b border-stone-200/60 bg-white/95 pt-[env(safe-area-inset-top,0px)] shadow-sm backdrop-blur-2xl;
  }
  .site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, rgba(166, 124, 46, 0.55) 50%, transparent 95%);
    pointer-events: none;
  }

  /* Premium dark footer */
  .site-footer {
    @apply relative border-t border-luxe-gold/25 bg-luxe-ink text-white/85;
  }
  .site-footer::before {
    content: '';
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 184, 114, 0.5), transparent);
  }
  .site-footer__inner {
    @apply py-14 pb-[max(2.5rem,env(safe-area-inset-bottom,0px)+1.5rem)] sm:py-16;
  }
  .site-footer__grid {
    @apply grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-12 lg:items-start lg:gap-x-10 lg:gap-y-12;
  }
  .site-footer__brand { @apply min-w-0 sm:col-span-2 lg:col-span-4; }
  .site-footer__nav { @apply min-w-0 lg:col-span-2; }
  .site-footer__nav--legal { @apply lg:col-span-3; }
  .site-footer__newsletter { @apply min-w-0 sm:col-span-2 lg:col-span-3; }
  .site-footer__heading {
    @apply text-[11px] font-semibold uppercase tracking-[0.28em] text-luxe-champagne/90;
  }
  .site-footer__links { @apply mt-4 space-y-1; }
  .site-footer__link {
    @apply inline-flex min-h-[44px] w-full max-w-full items-center gap-3 rounded-xl text-base text-white/80 transition hover:text-luxe-champagne focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-luxe-gold/70;
  }
  .site-footer__link-icon {
    @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-luxe-champagne;
  }
  .site-footer__link-label { @apply min-w-0 break-words leading-snug; }
  .site-footer__bar-link {
    @apply inline-flex min-h-[40px] w-auto items-center gap-2.5 text-sm text-white/60 transition hover:text-luxe-champagne;
  }
  .site-footer__social { @apply mt-4 flex flex-col gap-2; }
  .site-footer__bar {
    @apply mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 sm:flex-row;
  }
  .site-footer__newsletter.luxe-surface {
    @apply border-white/10 bg-white/5 shadow-none backdrop-blur-sm;
  }
  .site-footer__newsletter .luxe-input {
    @apply border-white/15 bg-white/10 text-white placeholder:text-white/40 focus:border-luxe-champagne/50 focus:ring-luxe-champagne/30;
  }

  .home-delivery-promo {
    @apply border-y border-luxe-gold/20 bg-gradient-to-r from-luxe-champagne/10 via-white to-luxe-graphite/80;
  }
  .home-delivery-promo__card {
    @apply flex flex-col gap-4 rounded-3xl border border-luxe-gold/15 bg-white/90 p-5 shadow-luxe sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:p-6;
  }
  .home-delivery-promo__icon {
    background: linear-gradient(135deg, #d4b872 0%, #a67c2e 50%, #8b6914 100%);
    @apply inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl text-black shadow-luxe-gold/30 shadow-md;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-safe\\:animate-none { animation: none !important; }
    * { scroll-behavior: auto !important; }
  }
}