@import "tailwindcss";

@theme {
  --font-sans: var(--font-sans-active, var(--font-sans-locale, 'Sarabun')), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: var(--font-heading-active, var(--font-heading-locale, 'Prompt')), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: var(--font-serif-active, var(--font-serif-locale, ui-serif)), Georgia, Cambria, "Times New Roman", Times, serif;

  --color-pop-pink: #FF6B6B;
  --color-pop-yellow: #FFF200;
  --color-pop-orange: #FFA07A;
  --color-pop-red: #FF4500;
  --color-pop-cyan: #E0FFFF;
  --color-pop-green: #98FB98;
  --color-pop-purple: #D8BFD8;
  --color-pop-bg: #FFF0F5;
  --color-pop-black: #333333;

  /* Spa Theme Colors */
  --color-spa-light: #FDFDF9;
  --color-spa-sand: #F4EDE2;
  --color-spa-sage: #EAEFEA;
  --color-spa-stone: #4B4B46;
  --color-spa-charcoal: #2E2E2A;
  --color-spa-forest: #1F3D2D;
  --color-spa-gold: #D4AF37;
  --color-night-900: #111827;

  --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
  --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
  
  --animate-pop-in: fade-in-up 0.6s ease-out forwards;
  --animate-spin-slow: spin 15s linear infinite;

  @keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

@layer base {
  :root,
  html {
    --font-sans-locale: 'Sarabun';
    --font-heading-locale: 'Prompt';
    --font-serif-locale: ui-serif;
  }

  html[lang="en"] {
    --font-sans-locale: 'Inter';
    --font-heading-locale: 'Inter';
    --font-serif-locale: ui-serif;
  }

  html[lang="ja"] {
    --font-sans-locale: '"Noto Sans JP"';
    --font-heading-locale: '"Noto Sans JP"';
    --font-serif-locale: '"Noto Serif JP"';
  }

  html[lang="zh"] {
    --font-sans-locale: '"Noto Sans SC"';
    --font-heading-locale: '"Noto Sans SC"';
    --font-serif-locale: '"Noto Serif SC"';
  }

  html[lang="ko"] {
    --font-sans-locale: '"Noto Sans KR"';
    --font-heading-locale: '"Noto Sans KR"';
    --font-serif-locale: '"Noto Serif KR"';
  }

  body {
    @apply bg-pop-bg text-pop-black font-sans antialiased;
    background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
    min-height: 100vh;
  }

  h1, h2, h3, h4 {
    @apply text-pop-black font-semibold tracking-tight;
  }
}

@layer components {
  .ui-page-shell {
    @apply min-h-screen bg-pop-bg;
  }

  .ui-section-band {
    @apply px-6 py-16 md:px-8 md:py-24;
  }

  .ui-section-inner {
    @apply mx-auto max-w-7xl;
  }

  .ui-section-title {
    @apply text-3xl font-semibold text-pop-black md:text-5xl;
  }

  .ui-section-subtitle {
    @apply mx-auto max-w-2xl text-pop-black/60;
  }

  .ui-shell-card {
    @apply rounded-3xl border border-pop-black/10 bg-night-900 shadow-brutal transition-all duration-300;
  }

  .ui-shell-card-hover {
    @apply hover:-translate-y-1 hover:shadow-brutal-hover;
  }

  .ui-chip {
    @apply inline-flex items-center justify-center rounded-full border px-4 py-2 text-xs font-bold uppercase tracking-widest transition;
  }

  .ui-button-primary {
    @apply inline-flex items-center justify-center rounded-full bg-pop-pink px-6 py-3 text-xs font-bold uppercase tracking-widest text-pop-bg transition-colors hover:opacity-90;
  }

  .ui-button-secondary {
    @apply inline-flex items-center justify-center rounded-full bg-pop-bg px-6 py-3 text-xs font-bold uppercase tracking-widest text-pop-black transition-colors hover:bg-pop-pink hover:text-pop-bg;
  }

  .ui-input-shell {
    @apply w-full rounded-full border border-pop-black/20 bg-transparent px-6 py-4 text-sm text-pop-black outline-none transition placeholder:text-pop-black/50 focus:border-pop-pink;
  }

  .ui-muted-text {
    @apply text-pop-black/70;
  }

  .ui-hero-shell {
    @apply relative flex min-h-[90vh] items-center justify-center overflow-hidden bg-night-900 text-pop-bg md:aspect-[21/9] md:min-h-0;
  }

  .ui-hero-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-pop-bg) 40%, transparent);
  }

  .ui-hero-overlay-strong {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-pop-bg) 90%, transparent),
      color-mix(in srgb, var(--color-pop-bg) 10%, transparent),
      color-mix(in srgb, var(--color-pop-bg) 30%, transparent)
    );
  }

  .ui-hero-content {
    @apply relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0;
  }

  .ui-hero-title {
    @apply font-serif text-5xl font-light leading-tight tracking-wide drop-shadow-md md:text-7xl lg:text-8xl;
    color: var(--color-pop-black);
  }

  .ui-hero-copy {
    @apply mx-auto max-w-2xl pb-8 pt-4 text-lg font-light drop-shadow-md md:text-xl;
    color: var(--color-pop-black);
  }

  .ui-banner-shell {
    @apply relative mx-auto min-h-[350px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal;
  }

  .ui-banner-overlay {
    @apply absolute inset-0 bg-gradient-to-r from-pop-black/80 via-pop-black/40 to-transparent;
  }

  .ui-banner-content {
    @apply relative z-10 max-w-xl space-y-4 p-8 text-pop-bg md:p-16;
  }

  .ui-card-soft {
    @apply rounded-2xl border border-pop-black/10 bg-night-900 shadow-sm;
  }

  .ui-dark-shell {
    @apply bg-pop-black px-6 py-20 text-pop-bg;
  }

  .ui-dark-card {
    @apply overflow-hidden rounded-3xl border border-pop-black/10 bg-night-900;
  }

  .ui-dark-card-title {
    @apply text-xl font-serif font-light tracking-wide text-pop-black md:text-2xl;
  }

  .ui-dark-card-copy {
    @apply text-sm font-light leading-relaxed text-pop-black/70;
  }

  .ui-dark-link {
    @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-pop-pink transition-colors hover:text-pop-black;
  }

  .brutal-box {
    @apply bg-night-900 border border-pop-black/20 rounded-2xl shadow-brutal transition-all duration-300;
  }
  
  .brutal-box-hover {
    @apply hover:-translate-y-2 hover:shadow-brutal-hover;
  }

  .brutal-button {
    @apply px-8 py-4 bg-pop-pink text-pop-bg font-medium rounded-full shadow-brutal transition-all duration-300 hover:opacity-90 hover:-translate-y-1 hover:shadow-brutal-hover;
  }

  .brutal-button-alt {
    @apply px-8 py-4 bg-transparent text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-pink hover:text-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-pop-bg;
}

::-webkit-scrollbar-thumb {
  @apply bg-pop-black/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-pop-black/50;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Product Editorial Image Overrides */
.product-editorial img {
  width: 100%;
  max-width: 480px;
  margin: 2rem auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow-brutal);
}

/* Fallback Thai Serif to Prompt for luxury classical look */
:lang(th) .font-serif {
  font-family: 'Prompt', sans-serif !important;
}

.ui-prose p {
  @apply mb-4 leading-relaxed;
}
.ui-prose p:last-child {
  @apply mb-0;
}
.ui-prose ul {
  @apply list-inside list-disc mb-4 space-y-1;
}
.ui-prose ol {
  @apply list-inside list-decimal mb-4 space-y-1;
}
.ui-prose h1, .ui-prose h2, .ui-prose h3, .ui-prose h4 {
  @apply font-serif font-semibold mt-8 mb-4 text-pop-black;
}
.ui-prose a {
  @apply text-pop-pink underline hover:opacity-80 transition-opacity;
}
.ui-prose strong {
  @apply font-bold;
}
.ui-prose blockquote {
  @apply border-l-4 border-pop-pink pl-4 italic opacity-80 my-4;
}