/* index.css */
/* Premium CSS Variable System & Custom Resets for FlyMaria Travel Platform */

:root {
  /* Brand & Accents */
  --color-primary: #000613;
  --color-on-primary: #ffffff;
  --color-primary-container: #001f3f;
  --color-on-primary-container: #6f88ad;
  --color-primary-fixed: #d4e3ff;
  --color-primary-fixed-dim: #afc8f0;
  --color-on-primary-fixed: #001c3a;
  --color-on-primary-fixed-variant: #2f486a;

  /* Secondary */
  --color-secondary: #515f74;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d5e3fc;
  --color-on-secondary-container: #57657a;
  --color-secondary-fixed: #d5e3fc;
  --color-secondary-fixed-dim: #b9c7df;
  --color-on-secondary-fixed: #0d1c2e;
  --color-on-secondary-fixed-variant: #3a485b;

  /* Tertiary */
  --color-tertiary: #6366f1; /* Electric Indigo */
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #080075;
  --color-on-tertiary-container: #7376ff;
  --color-tertiary-fixed: #e1e0ff;
  --color-tertiary-fixed-dim: #c0c1ff;
  --color-on-tertiary-fixed: #07006c;
  --color-on-tertiary-fixed-variant: #2f2ebe;

  /* Surfaces & Backgrounds */
  --color-surface: #f7f9fb;
  --color-on-surface: #191c1e;
  --color-surface-bright: #f7f9fb;
  --color-surface-dim: #d8dadc;
  --color-surface-tint: #476083;
  --color-surface-variant: #e0e3e5;
  --color-on-surface-variant: #43474e;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-inverse-surface: #2d3133;
  --color-inverse-on-surface: #eff1f3;
  --color-inverse-primary: #afc8f0;

  /* Utility & Borders */
  --color-outline: #74777f;
  --color-outline-variant: rgba(196, 198, 207, 0.4);
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Scrollbars & Shadows */
  --scrollbar-thumb: rgba(0, 6, 19, 0.12);
  --scrollbar-thumb-hover: rgba(0, 6, 19, 0.25);
  --shadow-ambient: 0 12px 40px rgba(0, 6, 19, 0.03);
  --shadow-card: 0 4px 20px rgba(0, 6, 19, 0.015);
  --shadow-modal: 0 32px 80px rgba(0, 6, 19, 0.08);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-sidebar-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.4);
  
  /* Gradients */
  --velocity-gradient: linear-gradient(135deg, #000613 0%, #080075 100%);
  --shine-gradient: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.dark {
  /* Brand & Accents */
  --color-primary: #f7f9fb;
  --color-on-primary: #000613;
  --color-primary-container: #001f3f;
  --color-on-primary-container: #afc8f0;
  --color-primary-fixed: #001c3a;
  --color-primary-fixed-dim: #2f486a;
  --color-on-primary-fixed: #d4e3ff;
  --color-on-primary-fixed-variant: #afc8f0;

  /* Secondary */
  --color-secondary: #94a3b8;
  --color-on-secondary: #0f172a;
  --color-secondary-container: #1e293b;
  --color-on-secondary-container: #cbd5e1;
  --color-secondary-fixed: #0d1c2e;
  --color-secondary-fixed-dim: #3a485b;
  --color-on-secondary-fixed: #d5e3fc;
  --color-on-secondary-fixed-variant: #b9c7df;

  /* Tertiary */
  --color-tertiary: #818cf8; /* Light Indigo */
  --color-on-tertiary: #0f172a;
  --color-tertiary-container: #1e1b4b;
  --color-on-tertiary-container: #c7d2fe;
  --color-tertiary-fixed: #07006c;
  --color-tertiary-fixed-dim: #2f2ebe;
  --color-on-tertiary-fixed: #e1e0ff;
  --color-on-tertiary-fixed-variant: #c0c1ff;

  /* Surfaces & Backgrounds (Midnight Orbit) */
  --color-surface: #000207;
  --color-on-surface: #f8fafc;
  --color-surface-bright: #0c101b;
  --color-surface-dim: #05070d;
  --color-surface-tint: #8bbafe;
  --color-surface-variant: #1e293b;
  --color-on-surface-variant: #94a3b8;
  --color-surface-container-lowest: #000613;
  --color-surface-container-low: #040d1e;
  --color-surface-container: #08142c;
  --color-surface-container-high: #0d1c3a;
  --color-surface-container-highest: #122448;
  --color-inverse-surface: #e2e8f0;
  --color-inverse-on-surface: #0f172a;
  --color-inverse-primary: #3b82f6;

  /* Utility & Borders */
  --color-outline: #475569;
  --color-outline-variant: rgba(255, 255, 255, 0.08);
  --color-error: #f87171;
  --color-on-error: #7f1d1d;
  --color-error-container: #450a0a;
  --color-on-error-container: #fca5a5;

  /* Scrollbars & Shadows */
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
  --shadow-ambient: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.6);

  /* Glassmorphism */
  --glass-bg: rgba(0, 6, 19, 0.6);
  --glass-sidebar-bg: rgba(0, 4, 15, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);

  /* Gradients */
  --velocity-gradient: linear-gradient(135deg, #08142c 0%, #1e1b4b 100%);
  --shine-gradient: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 9999px;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Base resets & styles */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure the main app wrapper fills the full height */
body > div:not(#preview-gate) {
  height: 100%;
}

/* Micro-animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Tab Panel Transitions */
.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
}

/* Navigation items hover effect */
.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-tertiary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}

.nav-item:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Input Fields Style according to bottom-stroke minimal guidelines */
.ghost-input-container {
  border-bottom: 1.5px solid var(--color-outline-variant);
  transition: border-color 0.2s, border-width 0.2s;
}

.ghost-input-container:focus-within {
  border-bottom-color: var(--color-tertiary);
  border-bottom-width: 2px;
}