/* ============================================================
   Design tokens — zamtraveler-guides
   Aligned with zamtraveler.com prod (/vietnam, /traveler, etc.)
   Source: /var/www/zamtraveler/public/feature-page.css
   Palette: deep navy + amber/red accent. Font: Inter.
   ============================================================ */
:root {
  /* ── Surfaces ─────────────────────────────────────── */
  --bg-primary:  #0a0e1a;
  --bg-card:     rgba(10, 14, 26, 0.85);
  --bg-card-solid: #10152a;

  /* ── Text ─────────────────────────────────────────── */
  --text-primary:   #f0f4ff;
  --text-secondary: #8892b0;
  --text-muted:     #5a6380;

  /* ── Accents ──────────────────────────────────────── */
  --accent-amber:    #f59e0b;
  --accent-warm:     #ef4444;
  --accent-gradient: linear-gradient(135deg, #f59e0b, #ef4444);

  /* Amber used at different opacities — matches prod exactly */
  --amber-bg-soft:   rgba(245, 158, 11, 0.08);
  --amber-bg-medium: rgba(245, 158, 11, 0.10);
  --amber-bg-strong: rgba(245, 158, 11, 0.20);
  --amber-glow:      rgba(245, 158, 11, 0.15);
  --amber-border-soft:   rgba(245, 158, 11, 0.15);
  --amber-border-medium: rgba(245, 158, 11, 0.25);
  --amber-border-strong: rgba(245, 158, 11, 0.50);

  /* ── Rules ────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-amber-card: rgba(245, 158, 11, 0.12);

  /* ── Typography ───────────────────────────────────── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, sans-serif;
  --font-hero:    'Orbitron', 'Inter', sans-serif; /* only on main /traveler hub, not per-trip */

  /* ── Spacing ──────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radii ────────────────────────────────────────── */
  --radius-pill:   100px;
  --radius-card:   24px;
  --radius-card-sm: 16px;
  --radius:        12px;
  --radius-sm:     8px;

  /* ── Motion ───────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* amber-pill hover bounce */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 0.15s;
  --dur:      0.3s;
  --dur-slow: 0.8s;

  /* ── Layout ───────────────────────────────────────── */
  --max-width:       720px;   /* matches .fp-container width */
  --max-width-wide:  1100px;  /* trip page with map + grid needs more room */
  --topbar-h:        64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}