/* ============================================================
   SkySaver AI — Design Tokens
   "Travel that handles itself."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand: indigo / violet / pink ---- */
  --indigo-700: #4338CA;
  --indigo-600: #4F46E5;
  --indigo-500: #6366F1;
  --indigo-100: #E0E7FF;
  --indigo-50:  #EEF2FF;
  --violet-500: #8B5CF6;
  --violet-400: #A78BFA;
  --pink-500:   #EC4899;
  --pink-400:   #F472B6;
  --purple-400: #C084FC;

  /* ---- Neutrals (cool slate) ---- */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* ---- Semantic ---- */
  --emerald-500: #10B981;
  --emerald-50:  #ECFDF5;
  --blue-500:    #3B82F6;
  --blue-50:     #EFF6FF;
  --amber-500:   #F59E0B;
  --amber-50:    #FFFBEB;
  --red-500:     #EF4444;
  --red-600:     #DC2626;
  --red-50:      #FEF2F2;

  /* ---- Leg category accents ---- */
  --flight-from:#EFF6FF; --flight-to:#DBEAFE; --flight-border:#BFDBFE; --flight-ink:#1D4ED8;
  --hotel-from:#FAF5FF;  --hotel-to:#F3E8FF;  --hotel-border:#E9D5FF;  --hotel-ink:#7E22CE;
  --transport-from:#FFFBEB; --transport-to:#FEF3C7; --transport-border:#FDE68A; --transport-ink:#B45309;
  --meeting-from:#ECFDF5; --meeting-to:#D1FAE5; --meeting-border:#A7F3D0; --meeting-ink:#047857;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(120deg, var(--indigo-600) 0%, var(--violet-500) 45%, var(--pink-500) 100%);
  --grad-brand-soft: linear-gradient(120deg, #6366F1 0%, #A78BFA 50%, #F472B6 100%);
  --grad-text: linear-gradient(110deg, #6366F1 0%, #8B5CF6 40%, #EC4899 90%);
  --grad-ribbon: linear-gradient(115deg, #FB923C 0%, #EC4899 28%, #8B5CF6 55%, #4F46E5 76%, #22D3EE 100%);
  --grad-rainbow: linear-gradient(90deg, #4F46E5, #8B5CF6, #EC4899, #F59E0B, #10B981);

  /* ---- Type ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Shadow (indigo-tinted) ---- */
  --sh-xs: 0 1px 2px rgba(15,23,42,.06);
  --sh-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --sh-lg: 0 24px 60px -12px rgba(79,70,229,.22), 0 8px 24px rgba(15,23,42,.08);
  --sh-glow: 0 18px 50px -12px rgba(99,102,241,.45);
  --sh-glow-pink: 0 18px 50px -12px rgba(236,72,153,.4);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--slate-900);
  background: var(--white);
  font-feature-settings: "cv02","cv03","cv04","ss01";
}
::selection { background: rgba(139,92,246,.22); }

/* ---- Reusable atoms ---- */
.eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--indigo-600);
}
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mono { font-family: var(--font-mono); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  border-radius: var(--r-full); border: 1px solid transparent;
  padding: 13px 22px; cursor: pointer; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  white-space: nowrap; line-height: 1; position: relative; overflow: hidden;
}
.btn:active { transform: translateY(0) scale(.99); }
.btn-primary {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 8px 22px -6px rgba(79,70,229,.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(79,70,229,.6); }
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost {
  background: rgba(255,255,255,.7); color: var(--slate-800);
  border-color: var(--slate-200); backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--slate-300); box-shadow: var(--sh-sm); background:#fff; }
.btn-danger { background: var(--red-500); color:#fff; box-shadow: 0 8px 22px -6px rgba(239,68,68,.5); }
.btn-danger:hover { transform: translateY(-2px); background: var(--red-600); }
.btn-sm { padding: 9px 15px; font-size: 13.5px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---- Badge ---- */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius: var(--r-full);
  line-height:1; letter-spacing:.01em;
}
.badge-success { background: var(--emerald-50); color:#047857; }
.badge-info    { background: var(--blue-50);  color:#1d4ed8; }
.badge-warn    { background: var(--amber-50); color:#b45309; }
.badge-danger  { background: var(--red-50);   color:#b91c1c; }
.badge-neutral { background: var(--slate-100); color: var(--slate-600); }

/* ---- Live ping dot ---- */
.ping { position: relative; width: 9px; height: 9px; display:inline-block; }
.ping i { position:absolute; inset:0; border-radius:50%; background: var(--emerald-500); }
.ping::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: var(--emerald-500); animation: ping 1.6s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity:.6; } 80%,100% { transform: scale(2.6); opacity:0; } }

/* ---- Scrollbar ---- */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 99px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--slate-300); }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .01ms !important; }
}