@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import "tailwindcss";

@theme {
  /* Quiet Luxury Palette — HOM AROMA Brand Reference */
  --color-brand-primary: #B8956A;
  --color-brand-primary-hover: #A07D3A;
  --color-brand-accent: #D4B97A;
  --color-brand-warm: #D4785A;
  --color-brand-cool: #EDE6DD;
  --color-brand-success: #5B9A4D;
  --color-brand-soft: #DABE7E;
  --color-surface-page: #F5F0EB;
  --color-surface-nav-rest: #FDFAF7;
  --color-surface-card: #FFFFFF;
  --color-text-main: #3A2F28;
  --color-muted-text: #7A6E63;
  --color-line-primary: #00B900;
  --color-line-primary-hover: #009900;

  /* New tokens — extended Quiet Luxury system */
  --color-caption-text: #B0A396;
  --color-border-color: #E8E0D8;
  --color-surface-muted: #EDE6DD;
  --radius-base: 8px;
  --radius-card: 16px;

  /* pop-* aliases — used by apps/spa ThemeInjector */
  --color-pop-pink: var(--color-brand-primary);
  --color-pop-yellow: var(--color-brand-accent);
  --color-pop-orange: var(--color-brand-warm);
  --color-pop-red: var(--color-brand-primary-hover);
  --color-pop-cyan: var(--color-brand-cool);
  --color-pop-green: var(--color-brand-success);
  --color-pop-purple: var(--color-brand-soft);
  --color-pop-bg: var(--color-surface-page);
  --color-pop-black: var(--color-text-main);
  --color-pop-caption: var(--color-caption-text);
  --color-pop-border: var(--color-border-color);
  --color-pop-muted-bg: var(--color-surface-muted);

  /* Serif font — Playfair Display for Quiet Luxury headings */
  --font-playfair: var(--font-playfair, "Playfair Display"), ui-serif, Georgia, serif;
  --font-serif: var(--font-serif-locale, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif;

  --shadow-card: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-brutal: var(--shadow-card);
  --shadow-brutal-hover: var(--shadow-card-hover);
  
  --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 {
    --navbar-height: 72px;
    --navbar-bottom: 72px;
    --font-body-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
    --font-display-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
    --font-serif-locale: ui-serif;
  }

  [lang="en"] {
    --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --font-display-locale: var(--font-body-locale);
    --font-serif-locale: ui-serif;
  }

  [lang="ja"] {
    --font-body-locale: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
    --font-display-locale: var(--font-body-locale);
    --font-serif-locale: "Noto Serif JP", ui-serif;
  }

  [lang="zh"] {
    --font-body-locale: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
    --font-display-locale: var(--font-body-locale);
    --font-serif-locale: "Noto Serif SC", ui-serif;
  }

  [lang="ko"] {
    --font-body-locale: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
    --font-display-locale: var(--font-body-locale);
    --font-serif-locale: "Noto Serif KR", ui-serif;
  }

  [lang="vi"] {
    --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --font-display-locale: var(--font-body-locale);
    --font-serif-locale: ui-serif;
  }

  html {
    font-family: var(--font-body-active, var(--font-body-locale));
  }

  .site-theme-root {
    --font-sans: var(--font-body-active, var(--font-body-locale));
    --font-serif: var(--font-display-active, var(--font-display-locale));
    font-family: var(--font-sans);
  }

  body {
    @apply bg-surface-page text-text-main 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-text-main font-semibold tracking-tight;
    font-family: var(--font-display-active, var(--font-display-locale));
  }
}

@layer components {
  .brutal-box {
    @apply bg-surface-card border border-line-primary/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-brand-primary text-surface-card font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover;
  }

  .brutal-button-alt {
    @apply px-8 py-4 bg-surface-card text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover;
  }

  .ui-card {
    @apply rounded-2xl border border-line-primary/20 bg-surface-card shadow-card transition-all duration-300;
  }

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

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

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

  .ui-button-line {
    @apply inline-flex items-center justify-center rounded-full px-3 py-1.5 text-[11px] font-bold shadow-sm transition-all;
    background-color: #00B900;
    color: #ffffff;
  }
  
  .ui-button-line:hover {
    background-color: #009900;
    opacity: 0.95;
  }

  .ui-icon-button {
    @apply rounded-full p-2 text-text-main transition-all hover:bg-brand-primary/10 hover:text-brand-primary md:p-2.5;
  }

  .ui-brand-wordmark {
    @apply shrink-0 text-xl font-bold uppercase italic tracking-widest text-text-main md:text-2xl;
  }

  .ui-nav-chip {
    @apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-surface-card px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary;
  }

  .ui-nav-panel {
    @apply overflow-hidden rounded-xl border border-text-main/10 bg-surface-card shadow-2xl backdrop-blur-xl;
  }

  .ui-menu-link {
    @apply block w-full text-left text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary;
  }

  .ui-menu-link-compact {
    @apply block w-full text-left text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary;
  }

  .ui-menu-title {
    @apply text-xs font-bold uppercase tracking-widest text-text-main;
  }

  .ui-eyebrow {
    @apply text-xs font-bold uppercase tracking-[0.24em] text-brand-primary;
  }

  .ui-muted-text {
    @apply text-muted-text;
  }

  .ui-input-shell {
    @apply rounded-2xl border border-line-primary/20 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
  }

  .ui-footer-link {
    @apply transition-colors hover:text-brand-primary;
  }

  .ui-footer-social {
    @apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
  }

  .global-main {
    position: relative;
    z-index: 2;
    background: var(--color-surface-page);
  }

  .site-footer {
    position: relative;
    z-index: 1;
    background-color: var(--color-surface-page);
  }

  .site-footer-stage {
    position: relative;
  }

  .site-footer-brand-finale {
    display: flex;
    min-height: 55svh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
    background-color: var(--color-surface-page);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 20);
    text-align: center;
  }

  .site-footer-finale-logo {
    height: auto;
    max-height: calc(var(--spacing) * 32);
    width: auto;
    max-width: min(82vw, 32rem);
    object-fit: contain;
  }

  .site-footer-finale-wordmark {
    max-width: 100%;
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    font-weight: var(--font-weight-semibold, 600);
    overflow-wrap: break-word;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 0;
  }

  @media (min-width: 48rem) {
    .site-footer-finale-wordmark {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }

  .site-footer-navigation {
    position: relative;
    border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
    background-color: var(--color-surface-card);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 20);
    z-index: 3;
  }

  .site-footer-navigation-inner {
    display: grid;
    margin-inline: auto;
  }

  .site-footer--mobile-columns-1 .site-footer-navigation-inner { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .site-footer--mobile-columns-2 .site-footer-navigation-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer--container-narrow .site-footer-navigation-inner { max-width: 56rem; }
  .site-footer--container-standard .site-footer-navigation-inner { max-width: 80rem; }
  .site-footer--container-wide .site-footer-navigation-inner { max-width: 96rem; }
  .site-footer--container-full .site-footer-navigation-inner { max-width: none; }
  .site-footer--padding-sm .site-footer-navigation { padding-block: calc(var(--spacing) * 8); }
  .site-footer--padding-md .site-footer-navigation { padding-block: calc(var(--spacing) * 12); }
  .site-footer--padding-lg .site-footer-navigation { padding-block: calc(var(--spacing) * 20); }
  .site-footer--padding-xl .site-footer-navigation { padding-block: calc(var(--spacing) * 28); }
  .site-footer--gap-sm .site-footer-navigation-inner { gap: calc(var(--spacing) * 4); }
  .site-footer--gap-md .site-footer-navigation-inner { gap: calc(var(--spacing) * 8); }
  .site-footer--gap-lg .site-footer-navigation-inner { gap: calc(var(--spacing) * 12); }
  .site-footer--gap-xl .site-footer-navigation-inner { gap: calc(var(--spacing) * 16); }
  .site-footer--heading-sm .site-footer-column-heading { font-size: var(--text-xs); }
  .site-footer--heading-md .site-footer-column-heading { font-size: var(--text-sm); }
  .site-footer--heading-lg .site-footer-column-heading { font-size: var(--text-base); }
  .site-footer--link-sm .site-footer-column-links { font-size: var(--text-xs); }
  .site-footer--link-md .site-footer-column-links { font-size: var(--text-sm); }
  .site-footer--link-lg .site-footer-column-links { font-size: var(--text-base); }
  .site-footer--brand-logo-sm .site-footer-brand-logo { height: 1.5rem; width: auto; }
  .site-footer--brand-logo-md .site-footer-brand-logo { height: 2rem; width: auto; }
  .site-footer--brand-logo-lg .site-footer-brand-logo { height: 3rem; width: auto; }
  .site-footer--brand-logo-xl .site-footer-brand-logo { height: 4rem; width: auto; }
  .site-footer--social-sm .site-footer-social { height: 2rem; width: 2rem; font-size: 0.5625rem; }
  .site-footer--social-md .site-footer-social { height: 2.25rem; width: 2.25rem; font-size: 0.625rem; }
  .site-footer--social-lg .site-footer-social { height: 2.75rem; width: 2.75rem; font-size: var(--text-xs); }
  .site-footer--finale-mobile-compact .site-footer-brand-finale { min-height: 35svh; }
  .site-footer--finale-mobile-medium .site-footer-brand-finale { min-height: 55svh; }
  .site-footer--finale-mobile-large .site-footer-brand-finale { min-height: 75svh; }
  .site-footer--finale-logo-sm .site-footer-finale-logo { max-height: 4rem; max-width: min(72vw, 18rem); }
  .site-footer--finale-logo-md .site-footer-finale-logo { max-height: 6rem; max-width: min(76vw, 24rem); }
  .site-footer--finale-logo-lg .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
  .site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }

  @media (min-width: 48rem) {
    .site-footer--desktop-columns-2 .site-footer-navigation-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer--desktop-columns-3 .site-footer-navigation-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer--desktop-columns-4 .site-footer-navigation-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .site-footer--brand-logo-md .site-footer-brand-logo { height: 2.5rem; }
  }

  /* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
  @media (min-width: 1024px) {
    .global-main {
      position: relative;
      z-index: 2;
      background: var(--color-surface-page);
    }

    .site-footer--finale-curtain {
      min-height: 100svh;
    }

    .site-footer--finale-curtain .site-footer-stage {
      position: fixed;
      inset: 0;
      z-index: 0;
      min-height: 100svh;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      pointer-events: none;
    }

    .site-footer--finale-curtain .site-footer-brand-finale {
      min-height: 0;
      padding-block: calc(var(--spacing) * 16);
    }

    .site-footer--finale-curtain .site-footer-finale-wordmark {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .site-footer--finale-curtain .site-footer-navigation {
      pointer-events: auto;
    }

    .site-footer--finale-static.site-footer--finale-desktop-compact .site-footer-brand-finale { min-height: 35svh; }
    .site-footer--finale-static.site-footer--finale-desktop-half .site-footer-brand-finale { min-height: 50svh; }
    .site-footer--finale-static.site-footer--finale-desktop-screen .site-footer-brand-finale { min-height: 100svh; }
    .site-footer--finale-curtain.site-footer--finale-desktop-compact .site-footer-stage { grid-template-rows: 35svh auto; align-content: end; }
    .site-footer--finale-curtain.site-footer--finale-desktop-half .site-footer-stage { grid-template-rows: 50svh auto; align-content: end; }
    .site-footer--finale-curtain.site-footer--finale-desktop-screen .site-footer-stage { grid-template-rows: minmax(0, 1fr) auto; }
    .site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 12rem; max-width: min(68vw, 48rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer--finale-curtain .site-footer-stage {
      display: block;
      position: relative;
    }

    .site-footer--finale-curtain {
      min-height: 0;
    }
  }

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

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

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

  .ui-section-subtitle {
    @apply text-muted-text;
  }

  .ui-section-card {
    @apply rounded-3xl bg-surface-card shadow-card;
  }

  .ui-section-card-muted {
    @apply rounded-3xl bg-surface-page shadow-card;
  }

  .ui-section-link {
    @apply font-semibold text-brand-primary transition hover:text-brand-primary-hover;
  }

  .ui-accent-text {
    @apply italic text-brand-accent;
  }

  .ui-hero-shell {
    position: relative;
    display: flex;
    min-height: 90vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-surface-page);
    color: var(--color-text-main);
  }

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

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

  .ui-hero-title {
    color: var(--color-text-main);
    font-family: var(--font-display-active, var(--font-display-locale));
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.025em;
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  }

  .ui-hero-copy {
    margin-inline: auto;
    max-width: 42rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    color: color-mix(in srgb, var(--color-text-main) 90%, transparent);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.75rem;
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  }

  .ui-hero-button {
    @apply inline-flex items-center justify-center rounded-full px-6 py-3 text-xs font-bold uppercase tracking-widest transition-colors;
    background-color: var(--color-brand-primary);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
  }
  .ui-hero-button:hover {
    background-color: var(--color-brand-primary-hover, var(--color-brand-primary));
    opacity: 0.95;
  }

  .ui-hero-link {
    @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors;
    color: var(--color-brand-accent, var(--color-brand-primary));
    padding: 0.75rem 1.5rem;
  }

  .ui-hero-link:hover {
    opacity: 0.85;
  }

  .ui-banner-shell {
    position: relative;
    margin-inline: auto;
    min-height: 360px;
    max-width: 80rem;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-card);
  }

  .ui-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--color-text-main) 75%, transparent),
      color-mix(in srgb, var(--color-text-main) 35%, transparent),
      transparent
    );
  }

  .ui-banner-content {
    position: relative;
    z-index: 10;
    max-width: 36rem;
    padding: 2rem;
    color: var(--color-surface-card);
  }

  .ui-banner-content > * + * {
    margin-top: 1rem;
  }

  .ui-section-dark {
    background: var(--color-text-main);
    padding: 5rem 1.5rem;
    color: var(--color-surface-card);
  }

  .ui-section-dark-card {
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-line-primary) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface-card) 60%, transparent);
  }

  .ui-section-dark-card-title {
    color: var(--color-surface-card);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 2.5rem;
  }

  .ui-section-dark-card-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: rgb(255 255 255 / 0.7);
    font-size: 0.875rem;
    line-height: 1.625;
  }

  .ui-section-dark-link {
    display: inline-flex;
    color: var(--color-brand-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 150ms ease;
  }

  @media (min-width: 768px) {
    .ui-hero-shell {
      aspect-ratio: 21 / 9;
      min-height: 0;
    }

    .ui-hero-title {
      font-size: 4.5rem;
      line-height: 1;
    }

    .ui-hero-copy {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    .ui-banner-content {
      padding: 3.5rem;
    }

    .ui-section-dark-card-title {
      font-size: 3rem;
      line-height: 1;
    }
  }

  @media (min-width: 1024px) {
    .ui-hero-title {
      font-size: 6rem;
      line-height: 1;
    }
  }

  .ui-panel {
    @apply rounded-3xl bg-surface-card shadow-card;
  }

  .ui-panel-muted {
    @apply rounded-3xl bg-surface-page shadow-card;
  }

  .ui-panel-border {
    @apply rounded-3xl border border-line-primary/20 bg-surface-card shadow-card;
  }

  .ui-panel-header {
    @apply flex items-center gap-3 border-b border-line-primary/20 pb-5;
  }

  .ui-panel-title {
    @apply text-xl font-semibold text-text-main;
  }

  .ui-panel-subtitle {
    @apply text-sm text-muted-text;
  }

  .ui-form-label {
    @apply text-xs font-bold uppercase tracking-[0.18em] text-muted-text;
  }

  .ui-form-shell {
    @apply w-full rounded-2xl border border-line-primary/20 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
  }

  .ui-form-shell-light {
    @apply w-full rounded-2xl border border-line-primary/20 bg-surface-card px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
  }

  .ui-form-inline-button {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
  }

  .ui-form-inline-button-sm {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
  }

  .ui-form-secondary-button {
    @apply rounded-full border border-line-primary/20 px-5 py-2 text-sm font-semibold text-muted-text transition hover:text-brand-primary;
  }

  .ui-form-danger-button {
    @apply rounded-full border border-rose-100 p-2 text-rose-500 transition hover:bg-rose-50;
  }

  .ui-form-checkbox {
    @apply h-4 w-4 rounded border-line-primary/20 text-brand-primary;
  }

  .ui-status-badge {
    @apply rounded-full border px-3 py-1 text-xs font-bold;
  }

  .ui-status-badge-pending {
    border-color: rgb(254 243 199);
    background: rgb(255 251 235);
    color: rgb(180 83 9);
  }

  .ui-status-badge-active {
    border-color: rgb(209 250 229);
    background: rgb(236 253 245);
    color: rgb(4 120 87);
  }

  .ui-status-badge-shipped {
    border-color: rgb(224 242 254);
    background: rgb(240 249 255);
    color: rgb(3 105 161);
  }

  .ui-status-badge-cancelled {
    border-color: rgb(255 228 230);
    background: rgb(255 241 242);
    color: rgb(190 18 60);
  }

  .ui-status-badge-neutral {
    border-color: color-mix(in srgb, var(--color-line-primary) 20%, transparent);
    background: var(--color-surface-page);
    color: color-mix(in srgb, var(--color-text-main) 80%, transparent);
  }

  .ui-tone-warning {
    border-radius: 1rem;
    border: 1px solid rgb(254 243 199);
    background: rgb(255 251 235);
    color: rgb(146 64 14);
  }

  .ui-tone-success {
    border-radius: 1rem;
    border: 1px solid rgb(209 250 229);
    background: rgb(236 253 245);
    color: rgb(4 120 87);
  }

  .ui-tone-error {
    border-radius: 1rem;
    border: 1px solid rgb(255 228 230);
    background: rgb(255 241 242);
    color: rgb(190 18 60);
  }

  .ui-tone-info {
    border-radius: 1rem;
    border: 1px solid rgb(224 242 254);
    background: rgb(240 249 255);
    color: rgb(3 105 161);
  }

  .ui-avatar-shell {
    @apply flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
  }

  .ui-avatar-shell-sm {
    @apply flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
  }

  .ui-tab-button {
    @apply relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition;
  }

  .ui-tab-button-active {
    @apply text-brand-primary;
  }

  .ui-tab-button-inactive {
    @apply text-muted-text hover:text-text-main;
  }

  .ui-tab-count {
    @apply rounded-full bg-surface-page px-2 py-0.5 text-[10px];
  }

  .ui-empty-panel {
    @apply rounded-3xl bg-surface-card px-6 py-16 text-center shadow-card;
  }
}

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

::-webkit-scrollbar-track {
  @apply bg-surface-page;
}

::-webkit-scrollbar-thumb {
  @apply bg-surface-nav-rest rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-surface-nav-rest;
}

/* 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);
}

/* Announcement Bar Layout Shifting via CSS :has() */
body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
  top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
}


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