/* ==========================================================================
   Go Moto Bali - Design System
   "Sacred Grove" Theme
   Version: 1.0.0
   ========================================================================== */

/* === RESET & BASE === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-secondary);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* === DESIGN TOKENS === */
:root {
  /* --- COLORS --- */
  
  /* Base Backgrounds */
  --color-bg-base: #0F2E0F; /* Sacred Dark — fondasi terdalam, digunakan di body background utama */
  --color-bg-surface: #1A4A1E; /* Temple Forest — card, panel, navbar. Diambil langsung dari warna background logo */
  --color-bg-elevated: #2D6E35; /* Banyan Deep — hover state, elevated card, tooltip background */
  --color-bg-overlay: rgba(15, 46, 15, 0.85); /* Digunakan untuk modal backdrop, hero gradient overlay */

  /* Green Accent Scale */
  --color-accent-primary: #52B05E; /* Mango Leaf — primary CTA button, active state, icon fills */
  --color-accent-primary-hover: #72D47F; /* Fern Bright — hover state pada tombol primary */
  --color-accent-primary-glow: rgba(82, 176, 94, 0.15); /* Digunakan untuk card glow effect saat hover */
  --color-accent-primary-subtle: rgba(82, 176, 94, 0.08); /* Background sangat tipis, untuk highlighted section */
  --color-border-green: #3D8C47; /* Padi Green — border divider, input border default */

  /* Gold Accent Scale */
  --color-accent-gold: #C9A84C; /* Pura Gold — premium badge, vendor verified, secondary CTA */
  --color-accent-gold-bright: #E8C96A; /* Canang Gold — rating stars, teks "BALI" di logo, highlighted price */
  --color-accent-gold-soft: rgba(201, 168, 76, 0.12); /* Background lembut untuk gold elements */
  --color-accent-gold-glow: rgba(232, 201, 106, 0.2); /* Glow effect untuk premium/gold elements */

  /* Text Colors */
  --color-text-primary: #F5F0E8; /* Rice Paper — heading, judul utama di atas background gelap */
  --color-text-secondary: #AEEAB5; /* Dew Mist — body text, deskripsi di atas background gelap */
  --color-text-muted: #6B9E72; /* Muted green — placeholder, caption, disabled text */
  --color-text-inverse: #0F2E0F; /* Digunakan untuk teks di atas background terang (tombol gold, dll) */

  /* Border Colors */
  --color-border-default: rgba(61, 140, 71, 0.20); /* Padi Green transparan — border card default */
  --color-border-hover: rgba(82, 176, 94, 0.35); /* Border saat card/element di-hover */
  --color-border-accent: rgba(82, 176, 94, 0.50); /* Border active/focus — input field focus ring */
  --color-border-gold: rgba(201, 168, 76, 0.35); /* Border untuk premium/gold-tier elements */

  /* Semantic Colors */
  --color-success: #52B05E;
  --color-success-bg: rgba(82, 176, 94, 0.12);
  --color-warning: #E8C96A;
  --color-warning-bg: rgba(232, 201, 106, 0.12);
  --color-danger: #E05555;
  --color-danger-bg: rgba(224, 85, 85, 0.12);
  --color-info: #5BA3D9;
  --color-info-bg: rgba(91, 163, 217, 0.12);

  /* --- SPACING SCALE --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- BORDER RADIUS --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- SHADOW SYSTEM --- */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow-green: 0 0 24px rgba(82, 176, 94, 0.25);
  --shadow-glow-gold: 0 0 24px rgba(232, 201, 106, 0.25);
  --shadow-inset: inset 0 1px 0 rgba(82, 176, 94, 0.1);

  /* --- ANIMATION TOKENS --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* --- BREAKPOINTS --- */
  --bp-mobile: 768px;   /* < 768px = mobile */
  --bp-tablet: 1024px;  /* 768–1024px = tablet */
  --bp-desktop: 1280px; /* > 1024px = desktop */
}

/* === KEYFRAMES ANIMATION === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

@keyframes pulseGlow {
  0% { box-shadow: var(--shadow-glow-green); }
  50% { box-shadow: 0 0 32px rgba(82, 176, 94, 0.4); }
  100% { box-shadow: var(--shadow-glow-green); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* === TYPOGRAPHY UTILITIES === */
/* Contoh penggunaan: <h1 class="text-display">Explore Bali</h1> */
.text-display { 
  font-family: 'Syne', sans-serif; 
  font-size: clamp(52px, 8vw, 96px); 
  font-weight: 700; 
  line-height: 1.0; 
  letter-spacing: -2px; 
  color: var(--color-text-primary); 
}

/* Contoh penggunaan: <h2 class="text-heading">Our Fleet</h2> */
.text-heading { 
  font-family: 'Syne', sans-serif; 
  font-size: clamp(28px, 4vw, 42px); 
  font-weight: 700; 
  line-height: 1.2; 
  color: var(--color-text-primary); 
}

/* Contoh penggunaan: <h3 class="text-subheading">Honda Scoopy</h3> */
.text-subheading { 
  font-family: 'Syne', sans-serif; 
  font-size: clamp(20px, 2.5vw, 28px); 
  font-weight: 600; 
  line-height: 1.3; 
  color: var(--color-text-primary); 
}

/* Contoh penggunaan: <p class="text-body">Experience Bali with our premium rentals.</p> */
.text-body { 
  font-family: 'DM Sans', sans-serif; 
  font-size: 16px; 
  line-height: 1.7; 
  color: var(--color-text-secondary); 
}

/* Contoh penggunaan: <span class="text-caption">Includes 2 helmets</span> */
.text-caption { 
  font-family: 'DM Sans', sans-serif; 
  font-size: 13px; 
  line-height: 1.5; 
  color: var(--color-text-muted); 
}

/* Contoh penggunaan: <span class="text-price">Rp 150.000</span> */
.text-price { 
  font-family: 'Space Mono', monospace; 
  font-weight: 700; 
  color: var(--color-accent-primary-hover); 
}

/* Contoh penggunaan: <span class="text-price-gold">Premium $20</span> */
.text-price-gold { 
  font-family: 'Space Mono', monospace; 
  font-weight: 700; 
  color: var(--color-accent-gold-bright); 
}

.text-accent { color: var(--color-accent-primary); }
.text-gold { color: var(--color-accent-gold-bright); }

/* === COMPONENTS === */

/* 1. TOMBOL (BUTTONS) */
/* Contoh penggunaan: <button class="btn-primary">Book Now</button> */
.btn-primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  padding: 12px 28px;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 16px rgba(82,176,94,0.3);
  font-family: 'DM Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover { 
  background: var(--color-accent-primary-hover); 
  transform: translateY(-1px); 
  box-shadow: 0 6px 20px rgba(82,176,94,0.4); 
}

.btn-primary:active { 
  transform: translateY(0); 
}

/* Contoh penggunaan: <button class="btn-secondary">View Details</button> */
.btn-secondary {
  background: transparent;
  color: var(--color-accent-primary);
  border: 1.5px solid rgba(82,176,94,0.5);
  border-radius: var(--radius-full);
  padding: 11px 28px;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover { 
  background: var(--color-accent-primary-subtle); 
  border-color: var(--color-accent-primary); 
}

/* Contoh penggunaan: <button class="btn-gold">Premium Package</button> */
.btn-gold {
  background: transparent;
  color: var(--color-accent-gold-bright);
  border: 1.5px solid rgba(232,201,106,0.5);
  border-radius: var(--radius-full);
  padding: 11px 28px;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-gold:hover { 
  background: var(--color-accent-gold-soft); 
  border-color: var(--color-accent-gold-bright); 
}

/* Contoh penggunaan: <button class="btn-ghost">Cancel</button> */
.btn-ghost { 
  background: transparent; 
  color: var(--color-text-secondary); 
  padding: 11px 20px; 
  border: none; 
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.btn-ghost:hover { 
  color: var(--color-text-primary); 
}

/* 2. CARD */
/* Contoh penggunaan: <div class="card-base card-hover">...</div> */
.card-base {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-hover {
  transition: transform var(--transition-slow),
              box-shadow var(--transition-slow),
              border-color 300ms ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated), var(--shadow-glow-green);
  border-color: var(--color-border-hover);
}

/* 3. BADGE */
/* Contoh penggunaan: 
   <span class="badge badge-available">Available</span>
   <span class="badge badge-premium">Premium</span>
*/
.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
}

.badge-available { 
  background: var(--color-accent-primary-glow); 
  color: var(--color-accent-primary-hover); 
  border: 0.5px solid rgba(82,176,94,0.3); 
}

.badge-premium { 
  background: var(--color-accent-gold-soft); 
  color: var(--color-accent-gold-bright); 
  border: 0.5px solid rgba(201,168,76,0.3); 
}

.badge-limited { 
  background: var(--color-warning-bg); 
  color: var(--color-accent-gold-bright); 
  border: 0.5px solid rgba(232,201,106,0.3); 
}

.badge-booked { 
  background: var(--color-info-bg); 
  color: var(--color-info); 
  border: 0.5px solid rgba(91,163,217,0.3); 
}

.badge-unavailable { 
  background: var(--color-danger-bg); 
  color: var(--color-danger); 
  border: 0.5px solid rgba(224,85,85,0.3); 
}

/* 4. INPUT FIELD */
/* Contoh penggunaan: <input type="text" class="input-field" placeholder="Search..." /> */
.input-field {
  background: rgba(15,46,15,0.6);
  color: var(--color-text-primary);
  border: 1px solid rgba(61,140,71,0.25);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.input-field::placeholder { 
  color: var(--color-text-muted); 
}

.input-field:hover { 
  border-color: rgba(82,176,94,0.4); 
}

.input-field:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(82,176,94,0.15);
}

/* 5. NAVBAR */
/* Contoh penggunaan: <nav class="navbar scrolled">...</nav> */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15,46,15,0.0); /* transparan saat top */
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: all 350ms ease;
}

.navbar.scrolled {
  background: rgba(26,74,30,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(61,140,71,0.2);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* === UTILITY CLASSES TAMBAHAN === */

/* Contoh penggunaan: <h3 class="section-label">Our Fleet</h3> */
.section-label { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  color: var(--color-accent-primary); 
  margin-bottom: var(--space-3); 
}

/* Contoh penggunaan: <hr class="section-divider" /> */
.section-divider { 
  height: 1px; 
  border: none;
  background: linear-gradient(to right, transparent, rgba(61,140,71,0.3), transparent); 
  margin: var(--space-16) 0; 
}

/* Contoh penggunaan: <div class="glass-card">...</div> */
.glass-card { 
  background: rgba(26,74,30,0.6); 
  backdrop-filter: blur(16px); 
  border: 1px solid rgba(82,176,94,0.15); 
  border-radius: var(--radius-md);
}

/* Contoh penggunaan: <span class="star-rating">★★★★★</span> */
.star-rating { 
  color: var(--color-accent-gold-bright); 
}

/* Contoh penggunaan: <i class="verified-badge">✓</i> */
.verified-badge { 
  color: var(--color-accent-primary); 
}

/* === ANIMATION UTILITIES === */
/* Contoh penggunaan: <div class="animate-fade-in-up">...</div> */
.animate-fade-in-up { animation: fadeInUp var(--transition-slow) forwards; }
.animate-fade-in { animation: fadeIn var(--transition-base) forwards; }
.animate-slide-in-right { animation: slideInRight var(--transition-slow) forwards; }

/* Contoh penggunaan: <div class="skeleton-loader"></div> */
.skeleton-loader {
  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-border-green) 50%, var(--color-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-sm);
  min-height: 20px; /* Adjust as needed based on element */
}