/* -----------------------------------------
   Global (uses tokens.css variables)
----------------------------------------- */

body {
  color: var(--color-neutral-dark);
  background: var(--color-neutral-light);
}

/* Generic card polish */
.card { border-radius: 1rem; }
.card.shadow-soft { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.card + .card { margin-top: 1rem; }
.btn-lg { border-radius: .8rem; }

.table thead th { white-space: nowrap; }
.stat { font-variant-numeric: tabular-nums; }
.cta { box-shadow: 0 0.5rem 1.25rem rgba(2, 8, 20, 0.06); }

/* -----------------------------------------
   Hero variants
----------------------------------------- */

/* Dark/colourful hero (kept for other pages if needed) */
.hero {
  /* Brand forward gradient */
  background: radial-gradient(120% 120% at 0% 0%, #0066CC 0%, #3399FF 35%, #00AACC 70%, #00CCFF 110%);
  color: #fff;
}

/* Light hero (Option A) */
.hero-light {
  /* Use your neutral tokens for a soft, professional background */
  background: linear-gradient(180deg, #ffffff 0%, #F7F9FB 70%, var(--color-neutral-light) 100%);
  color: var(--color-neutral-dark);
}
.hero-light h1   { color: var(--color-neutral-dark); }
.hero-light .lead{ color: var(--color-neutral-muted); }
.demo-card       { border-radius: 1rem; }

/* -----------------------------------------
   Timeline / itinerary chips
----------------------------------------- */

.itinerary-line { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0; }
.itinerary-line .dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--color-status-success);           /* token */
  margin-top: .45rem;
}

/* -----------------------------------------
   Badges & utilities (token-driven)
----------------------------------------- */

.badge-success-subtle {
  /* Fallback first */
  background: #eaf6ee;
  color: var(--color-status-success);
  border: 1px solid #d7efde;
  /* Modern browsers: refine with color-mix */
  background: color-mix(in srgb, var(--color-status-success) 12%, #fff);
  border-color: color-mix(in srgb, var(--color-status-success) 25%, #fff);
}

.text-brand   { color: var(--color-brand-primary) !important; }
.bg-brand     { background: var(--color-brand-primary) !important; color: #fff !important; }
.border-brand { border-color: var(--color-brand-primary) !important; }
.text-accent  { color: var(--color-brand-accent) !important; }

.badge-accent {
  background: #fff3e1;
  color: var(--color-brand-accent);
  border: 1px solid #ffe0b3;
  background: color-mix(in srgb, var(--color-brand-accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--color-brand-accent) 25%, #fff);
}

/* -----------------------------------------
   KPI cards with coloured left borders
----------------------------------------- */
.card-kpi { border-left-width: .4rem; border-left-style: solid; }
.card-kpi .card-body { padding: .9rem 1rem; }
.card-kpi .metric    { font-weight: 700; letter-spacing: .2px; }
.card-kpi .label     { color: var(--color-neutral-muted); font-size: .85rem; }
/* Examples:
   .card-kpi.brand    { border-left-color: var(--color-brand-primary); }
   .card-kpi.success  { border-left-color: var(--color-status-success); }
   .card-kpi.warning  { border-left-color: var(--color-status-warning); }
   .card-kpi.danger   { border-left-color: var(--color-status-danger); }
*/

/* -----------------------------------------
   Public Itinerary – tab "cards"
----------------------------------------- */
.tab-cards .nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid #e5e7eb; background: #fff;
  border-radius: .75rem; padding: .55rem .8rem; margin: .25rem .4rem .25rem 0;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  font-weight: 500;
}
.tab-cards .nav-link:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.tab-cards .nav-link.active {
  border-color: var(--color-brand-primary);
  box-shadow: 0 2px 10px rgba(16,24,40,.12);
}

/* Category accent hooks (match to brand/accent) */
.cat-flight   { --tab-accent: var(--color-brand-primary); --card-accent: color-mix(in srgb, var(--color-brand-primary) 45%, #fff); }
.cat-hotel    { --tab-accent: var(--color-brand-accent);  --card-accent: color-mix(in srgb, var(--color-brand-accent) 45%, #fff); }

/* Optional: accent border on category result cards */
.accent-card { border-left: 6px solid var(--card-accent, #e5e7eb); border-radius: .75rem; }

/* -----------------------------------------
   Motion preferences
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tab-cards .nav-link { transition: none; }
}