/* ==========================================================================
   MALIKA ROYAL TRANS - Theme System (css/themes.css)
   Themes:
   1. Royal (Default: Merah dan Emas)
   2. Hitam-Merah (Hitam dan Merah)
   3. 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%);
}

/* 2. Theme 2: HITAM-MERAH (Hitam dan Merah) */
[data-theme="hitam-merah"] {
  --theme-id: "hitam-merah";

  /* Exact required tokens */
  --bg-base: #0B0B0D;
  --bg-card: #17181C;
  --bg-card-border: #2A2B31;
  --hero-gradient: linear-gradient(180deg, #0B0B0D 0%, #1B0709 55%, #0B0B0D 100%);
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #8E8E96;
  --accent: #F40000;
  --accent-hover: #C40500;
  --accent-contrast: #FFFFFF;
  --accent-glow: rgba(244, 0, 0, 0.35);
  --highlight: #FF3B3B;
  --btn-bg: #F40000;
  --btn-text: #FFFFFF;
  --navbar-solid: rgba(11, 11, 13, 0.85);
  --car-shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;

  /* Supporting harmonious design tokens */
  --bg-surface:     #111114;
  --bg-card-hover:  #202127;
  --hero-glow:      radial-gradient(circle, rgba(244, 0, 0, 0.22) 0%, rgba(27, 7, 9, 0) 70%);
  --steps-gradient: linear-gradient(180deg, #0B0B0D 0%, #160608 100%);
  --cta-gradient:   linear-gradient(135deg, #24080B 0%, #17181C 60%, #0B0B0D 100%);
  --page-hero-gradient: linear-gradient(180deg, #0B0B0D 0%, #1B0709 60%, #0B0B0D 100%);
  --card-active-bg: linear-gradient(135deg, #260C0F 0%, #17181C 100%);
  --card-img-bg:    linear-gradient(180deg, #141417 0%, #0E0E11 100%);
  --text-light:     #D4D4D8;
  --accent-subtle:  rgba(244, 0, 0, 0.12);
  --btn-hover:      #C40500;
  --navbar-border:  rgba(42, 43, 49, 0.5);
  --footer-bg:      #070708;
  --footer-border:  rgba(42, 43, 49, 0.4);
  --input-bg:       #111114;
  --input-border:   #2A2B31;
  --input-text:     #FFFFFF;
  --input-placeholder: #8E8E96;
  --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) */
body,
header,
main,
section,
footer,
article,
div,
aside,
button,
input,
select,
textarea,
span,
p,
h1, h2, h3, h4, h5, h6 {
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Disable transitions if prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body,
  header,
  main,
  section,
  footer,
  article,
  div,
  aside,
  button,
  input,
  select,
  textarea,
  span,
  p,
  h1, h2, h3, h4, h5, h6 {
    transition-duration: 0.001ms !important;
  }
}