/* ==========================================================================
   MALIKA ROYAL TRANS - Theme System (css/themes.css)
   Themes:
   1. Royal (Default: Dark Luxury Merah dan Emas)
   2. Putih (Putih Bersih)
   ========================================================================== */

/* 1. Theme 1: ROYAL (Default - Merah dan Emas) */
:root, [data-theme="royal"] {
  --theme-id: "royal";

  /* Exact required tokens */
  --bg-base: #0E0E10;
  --bg-card: #1A1A1F;
  --bg-card-border: #2E2E35;
  --hero-gradient: linear-gradient(180deg, #0E0E10 0%, #1C1508 55%, #0E0E10 100%);
  --text-primary: #FFFFFF;
  --text-secondary: #B4B4BC;
  --text-muted: #8A8A93;
  --accent: #E10600;
  --accent-hover: #C40500;
  --accent-contrast: #FFFFFF;
  --accent-glow: rgba(225, 6, 0, 0.35);
  --highlight: #C9A24B;
  --btn-bg: #E10600;
  --btn-text: #FFFFFF;
  --navbar-solid: rgba(14, 14, 16, 0.85);
  --car-shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;

  /* Supporting harmonious design tokens */
  --bg-surface:     #141418;
  --bg-card-hover:  #24242C;
  --hero-glow:      radial-gradient(circle, rgba(201, 162, 75, 0.2) 0%, rgba(225, 6, 0, 0.12) 40%, rgba(28, 21, 8, 0) 70%);
  --steps-gradient: linear-gradient(180deg, #0E0E10 0%, #17130B 100%);
  --cta-gradient:   linear-gradient(135deg, #241A0A 0%, #1A1A1F 60%, #0E0E10 100%);
  --page-hero-gradient: linear-gradient(180deg, #0E0E10 0%, #1C1508 60%, #0E0E10 100%);
  --card-active-bg: linear-gradient(135deg, #252018 0%, #1A1A1F 100%);
  --card-img-bg:    linear-gradient(180deg, #16161B 0%, #111114 100%);
  --text-light:     #D4D4DC;
  --accent-subtle:  rgba(225, 6, 0, 0.12);
  --btn-hover:      #C40500;
  --navbar-border:  rgba(46, 46, 53, 0.5);
  --footer-bg:      #09090B;
  --footer-border:  rgba(46, 46, 53, 0.4);
  --input-bg:       #141418;
  --input-border:   #2E2E35;
  --input-text:     #FFFFFF;
  --input-placeholder: #8A8A93;
  --map-filter:     invert(90%) hue-rotate(180deg) brightness(85%) contrast(90%);
}


/* 3. Theme 3: PUTIH (Putih Bersih) */
[data-theme="putih"] {
  --theme-id: "putih";

  /* Backgrounds */
  --bg-base:        #F8F9FA;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F3F4F6;
  --bg-card-border: #E5E7EB;

  /* Gradients */
  --hero-gradient:      linear-gradient(180deg, #FFFFFF 0%, #F5F3EF 45%, #EBE7DF 65%, #F8F9FA 100%);
  --hero-glow:          radial-gradient(circle, rgba(201, 162, 75, 0.14) 0%, rgba(225, 6, 0, 0.08) 45%, rgba(255, 255, 255, 0) 70%);
  --steps-gradient:     linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
  --cta-gradient:       linear-gradient(135deg, #1C1917 0%, #292524 60%, #12100E 100%);
  --page-hero-gradient: linear-gradient(180deg, #FFFFFF 0%, #F5F3EF 60%, #F8F9FA 100%);
  --card-active-bg:     linear-gradient(135deg, #FFFFFF 0%, #FFFDF7 100%);
  --card-img-bg:        linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);

  /* Typography */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #6B7280;
  --text-light:     #374151;

  /* Accents - Red and Gold, no blue */
  --accent:          #E10600;
  --accent-hover:    #B90500;
  --accent-contrast: #FFFFFF;
  --accent-glow:     rgba(225, 6, 0, 0.25);
  --accent-subtle:   rgba(225, 6, 0, 0.08);
  --highlight:       #8A6A1E;

  /* Buttons */
  --btn-bg:         #E10600;
  --btn-text:       #FFFFFF;
  --btn-hover:      #B90500;

  /* Components */
  --navbar-solid:   rgba(255, 255, 255, 0.96);
  --navbar-border:  rgba(229, 231, 235, 0.9);
  --car-shadow:     radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.06) 50%, transparent 75%);
  --footer-bg:      #F3F4F6;
  --footer-border:  #E5E7EB;

  /* Form controls */
  --input-bg:          #FFFFFF;
  --input-border:      #D1D5DB;
  --input-text:        #111827;
  --input-placeholder: #6B7280;

  /* Map */
  --map-filter: none;
  color-scheme: light;
}

/* Smooth Theme Transition (0.3s) scoped to key containers */
body,
.site-header,
.site-footer,
.mobile-drawer,
.product-card,
.feature-box,
.step-card,
.testimonial-card,
.terms-card,
.faq-item,
.calc-wrapper,
.hero-quick-booking,
.detail-modal-container,
.price-table-card,
.contact-card-item,
.form-input,
.form-select,
.form-textarea {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

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