/* ==========================================================================
   Trip Frogger — Kawaii Theme
   A playful, nature-inspired theme with rounded corners, bouncy animations,
   and a green-to-teal-to-blue color palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Import — Fredoka (weights 400–700)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   Layer 2 — Personality
   Theme-wide tokens that are mode-agnostic (neither light nor dark).
   -------------------------------------------------------------------------- */
[data-theme="kawaii"] {
  /* Typography — Fredoka runs heavier than system fonts, so shift weights down */
  --tf-font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tf-font-weight-normal: 300;   /* body text, data cells (system would use 400) */
  --tf-font-weight-medium: 400;   /* labels, nav items (system would use 500) */
  --tf-font-weight-semibold: 500; /* buttons, section headers (system would use 600) */
  --tf-font-weight-bold: 600;     /* page headings (system would use 700) */

  /* Rounded radii */
  --tf-radius-sm: 0.5rem;
  --tf-radius-md: 0.75rem;
  --tf-radius-lg: 1rem;

  /* Hover / press transforms */
  --tf-hover-transform: translateY(-2px) scale(1.01);
  --tf-card-hover-transform: translateY(-3px);
  --tf-btn-active-transform: scale(0.97);

  /* Category colors */
  --tf-cat-sightseeing: #059669;
  --tf-cat-food: #f97316;
  --tf-cat-shopping: #ec4899;
  --tf-cat-entertainment: #f43f5e;
  --tf-cat-adventure: #0d9488;
  --tf-cat-relaxation: #2563eb;
  --tf-cat-culture: #06b6d4;
  --tf-cat-nature: #14b8a6;
  --tf-cat-nightlife: #a855f7;
  --tf-cat-transportation: #eab308;
  --tf-cat-other: #94a3b8;

  /* Event type colors */
  --tf-evt-flights: #2563eb;
  --tf-evt-hotels: #7c3aed;
  --tf-evt-activities: #059669;
  --tf-evt-transport: #eab308;

  /* Route colors */
  --tf-route-1: #059669;
  --tf-route-2: #2563eb;
  --tf-route-3: #ef4444;
  --tf-route-4: #f59e0b;
  --tf-route-5: #8b5cf6;
  --tf-route-6: #ec4899;

  /* Map styles */
  --tf-map-water: #c9e8f0;
  --tf-map-landscape: #f0f4f0;

  /* Decorative */
  --tf-mascot-display: block;
  --tf-sticker-display: inline-flex;

  /* FAB */
  --tf-fab-gradient: linear-gradient(135deg, #1a56db, #7c3aed);
  --tf-fab-shadow: 0 4px 20px rgba(26, 86, 219, 0.4);
}

/* --------------------------------------------------------------------------
   Layer 3 — Light surfaces
   -------------------------------------------------------------------------- */
[data-theme="kawaii"][data-mode="light"] {
  /* Backgrounds */
  --tf-bg: #f8fafc;
  --tf-bg-card: #ffffff;
  --tf-bg-sidebar: #064e3b;
  --tf-bg-input: #ffffff;
  --tf-bg-hover: #f0fdf4;
  --tf-bg-backdrop: rgba(0, 0, 0, 0.4);

  /* Text */
  --tf-text: #1e293b;
  --tf-text-light: #64748b;
  --tf-text-sidebar: rgba(255, 255, 255, 0.85);
  --tf-text-heading: #064e3b;

  /* Borders */
  --tf-border: #e2e8f0;
  --tf-border-light: #f1f5f9;

  /* Green-tinted shadows */
  --tf-shadow-sm: 0 1px 2px rgba(5, 150, 105, 0.06);
  --tf-shadow-md: 0 4px 12px rgba(5, 150, 105, 0.08);
  --tf-shadow-lg: 0 8px 24px rgba(5, 150, 105, 0.12);
  --tf-shadow-xl: 0 20px 40px rgba(5, 150, 105, 0.15);

  /* Brand palette */
  --tf-primary: #059669;
  --tf-primary-dark: #064e3b;
  --tf-primary-light: #34d399;
  --tf-secondary: #0d9488;
  --tf-secondary-light: #5eead4;
  --tf-accent: #2563eb;
  --tf-accent-light: #93c5fd;
  --tf-white: #ffffff;

  /* Semantic */
  --tf-success: #10b981;
  --tf-warning: #f59e0b;
  --tf-danger: #ef4444;

  /* Gradients */
  --tf-gradient: linear-gradient(135deg, #059669 0%, #0d9488 50%, #2563eb 100%);
  --tf-gradient-subtle: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #eff6ff 100%);

  /* Sidebar */
  --tf-sidebar-hover: rgba(255, 255, 255, 0.1);
  --tf-sidebar-active: rgba(255, 255, 255, 0.15);

  /* Toast */
  --tf-toast-success-bg: #ecfdf5;
  --tf-toast-success-border: #a7f3d0;
  --tf-toast-error-bg: #fef2f2;
  --tf-toast-error-border: #fecaca;
  --tf-toast-warning-bg: #fffbeb;
  --tf-toast-warning-border: #fde68a;
  --tf-toast-info-bg: #eff6ff;
  --tf-toast-info-border: #bfdbfe;
}

/* --------------------------------------------------------------------------
   Layer 3 — Dark surfaces
   -------------------------------------------------------------------------- */
[data-theme="kawaii"][data-mode="dark"] {
  /* Backgrounds */
  --tf-bg: #0f1a14;
  --tf-bg-card: rgba(15, 26, 20, 0.92);
  --tf-bg-sidebar: #0a2618;
  --tf-bg-input: #1a2e23;
  --tf-bg-hover: #1a3a2a;
  --tf-bg-backdrop: rgba(0, 0, 0, 0.6);

  /* Text */
  --tf-text: #e2e8f0;
  --tf-text-light: #94a3b8;
  --tf-text-sidebar: rgba(255, 255, 255, 0.85);
  --tf-text-heading: #86efac;

  /* Borders */
  --tf-border: #1e3a2b;
  --tf-border-light: #162d21;

  /* Dark shadows with green glow */
  --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --tf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(34, 197, 94, 0.04);
  --tf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(34, 197, 94, 0.06);
  --tf-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(34, 197, 94, 0.08);

  /* Brand palette (inverted for dark) */
  --tf-primary: #34d399;
  --tf-primary-dark: #86efac;
  --tf-primary-light: #059669;
  --tf-secondary: #5eead4;
  --tf-secondary-light: #0d9488;
  --tf-accent: #93c5fd;
  --tf-accent-light: #2563eb;
  --tf-white: #1e293b;

  /* Semantic */
  --tf-success: #34d399;
  --tf-warning: #fbbf24;
  --tf-danger: #f87171;

  /* Gradients */
  --tf-gradient: linear-gradient(135deg, #34d399 0%, #5eead4 50%, #93c5fd 100%);
  --tf-gradient-subtle: linear-gradient(135deg, #0a2618 0%, #0f2d2a 50%, #0f1a2e 100%);

  /* Sidebar */
  --tf-sidebar-hover: rgba(134, 239, 172, 0.08);
  --tf-sidebar-active: rgba(134, 239, 172, 0.12);

  /* Toast */
  --tf-toast-success-bg: #052e1c;
  --tf-toast-success-border: #065f3e;
  --tf-toast-error-bg: #2d0a0a;
  --tf-toast-error-border: #7f1d1d;
  --tf-toast-warning-bg: #2d2305;
  --tf-toast-warning-border: #78640d;
  --tf-toast-info-bg: #0a1628;
  --tf-toast-info-border: #1e3a5f;

  /* Glass effects */
  --tf-card-backdrop-filter: blur(8px);

  /* Map styles (dark) */
  --tf-map-water: #0d2847;
  --tf-map-landscape: #0f1a14;

  /* Brighter category/event colors for dark bg legibility */
  --tf-cat-sightseeing: #34d399;
  --tf-cat-food: #fb923c;
  --tf-cat-shopping: #f472b6;
  --tf-cat-entertainment: #fb7185;
  --tf-cat-adventure: #5eead4;
  --tf-cat-relaxation: #60a5fa;
  --tf-cat-culture: #22d3ee;
  --tf-cat-nature: #2dd4bf;
  --tf-cat-nightlife: #c084fc;
  --tf-cat-transportation: #facc15;
  --tf-cat-other: #cbd5e1;
  --tf-evt-flights: #60a5fa;
  --tf-evt-hotels: #a78bfa;
  --tf-evt-activities: #34d399;
  --tf-evt-transport: #facc15;
  --tf-route-1: #34d399;
  --tf-route-2: #60a5fa;
  --tf-route-3: #f87171;
  --tf-route-4: #fbbf24;
  --tf-route-5: #a78bfa;
  --tf-route-6: #f472b6;
}

/* --------------------------------------------------------------------------
   Kawaii Keyframes
   -------------------------------------------------------------------------- */
@keyframes tf-mascotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes tf-iconWiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

@keyframes tf-successPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes tf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes tf-hoppingDots {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   Global Kawaii Selectors
   -------------------------------------------------------------------------- */
[data-theme="kawaii"] body,
[data-theme="kawaii"] {
  font-family: var(--tf-font-family);
  font-weight: var(--tf-font-weight-normal, 300);
}

/* Fredoka weight adjustments — one step lighter than system font equivalents */
[data-theme="kawaii"] h1,
[data-theme="kawaii"] h2,
[data-theme="kawaii"] h3 {
  font-weight: var(--tf-font-weight-bold, 600);
}
[data-theme="kawaii"] h4,
[data-theme="kawaii"] h5,
[data-theme="kawaii"] h6 {
  font-weight: var(--tf-font-weight-semibold, 500);
}
[data-theme="kawaii"] button,
[data-theme="kawaii"] .tf-button,
[data-theme="kawaii"] label,
[data-theme="kawaii"] th {
  font-weight: var(--tf-font-weight-medium, 400);
}
[data-theme="kawaii"] b,
[data-theme="kawaii"] strong {
  font-weight: var(--tf-font-weight-semibold, 500);
}

[data-theme="kawaii"] .tf-card-hover:hover,
[data-theme="kawaii"] .tf-card:hover {
  transform: var(--tf-card-hover-transform);
  transition: transform var(--tf-transition-base, 0.2s ease), box-shadow var(--tf-transition-base, 0.2s ease);
}

[data-theme="kawaii"] button:active,
[data-theme="kawaii"] .tf-button:active {
  transform: var(--tf-btn-active-transform);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="kawaii"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}