@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 42 33% 96%; --foreground: 222 37% 15%;
    --card: 0 0% 100%; --card-foreground: 222 37% 15%;
    --popover: 0 0% 100%; --popover-foreground: 222 37% 15%;
    --primary: 5 100% 68%; --primary-foreground: 0 0% 100%;
    --secondary: 220 51% 16%; --secondary-foreground: 0 0% 100%;
    --muted: 40 23% 93%; --muted-foreground: 220 13% 46%;
    --accent: 7 100% 96%; --accent-foreground: 5 76% 51%;
    --destructive: 0 72% 46%; --destructive-foreground: 0 0% 100%;
    --border: 39 18% 88%; --input: 39 18% 88%; --ring: 5 100% 68%;
    --success: 142 32% 43%; --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%; --warning-foreground: 25 75% 25%;
    --radius: 0.75rem;
    --elevation-card: 0 4px 18px rgb(20 33 61 / 0.05);
    --motion-fast: 150ms; --motion-standard: 220ms;
    --sidebar-background: 220 51% 16%; --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 5 100% 68%; --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 217 29% 28%; --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 216 30% 25%; --sidebar-ring: 5 100% 68%;
  }
  * { @apply border-border; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body { @apply bg-background text-foreground font-sans antialiased; min-width: 0; overflow-x: hidden; font-feature-settings: "rlig" 1, "calt" 1; text-align: left; }
  h1, h2, h3, h4, h5, h6 { @apply font-bold tracking-[-0.025em]; }
  :focus-visible { @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background; }
  ::selection { @apply bg-primary/20 text-foreground; }
}

@layer components {
  .page-shell { @apply mx-auto w-full max-w-[1440px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8; }
  .page-title { @apply text-2xl font-bold leading-tight text-foreground sm:text-3xl; }
  .section-title { @apply text-lg font-bold text-foreground sm:text-xl; }
  .surface-card { @apply rounded-xl border border-border bg-card; box-shadow: var(--elevation-card); }
  .status-success { @apply border-green-700/20 bg-green-700/10 text-green-800; }
  .status-warning { @apply border-amber-500/30 bg-amber-50 text-amber-900; }
  .status-neutral { @apply border-border bg-muted text-muted-foreground; }
  .touch-target { @apply inline-flex min-h-11 min-w-11 items-center justify-center; }
  .traveler-shell { @apply mx-auto w-full px-4 py-7 sm:px-6 lg:px-8 lg:py-10; }
  .traveler-shell--wide { @apply pt-0 lg:pt-0; }
  .traveler-display { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.045em; line-height: .96; }
  .traveler-eyebrow { @apply text-[10px] font-bold uppercase tracking-[.24em]; }
  .traveler-hero { @apply relative -mx-4 min-h-[390px] overflow-hidden bg-[#18343a] bg-cover bg-center px-6 py-12 sm:-mx-6 sm:min-h-[420px] sm:px-12 sm:py-16 lg:-mx-8 lg:min-h-[330px] lg:rounded-[2rem] lg:px-16 lg:py-12; display: flex; align-items: flex-end; }
  .traveler-hero__grain { @apply pointer-events-none absolute inset-0 opacity-20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
  .traveler-icon-button { @apply grid h-11 w-11 place-items-center rounded-full text-slate-700 transition hover:bg-white disabled:opacity-25; }
  .traveler-icon-button svg { @apply h-5 w-5; }
  .traveler-timeline { @apply relative; }
  .traveler-timeline::before { content: ''; @apply absolute bottom-8 left-[4.72rem] top-8 w-px bg-slate-900/10 sm:left-[6.72rem]; }
  .traveler-step { @apply relative grid w-full grid-cols-[3.75rem_2rem_minmax(0,1fr)] gap-3 py-7 text-left sm:grid-cols-[5.5rem_2.5rem_minmax(0,1fr)] sm:gap-4 sm:py-8; }
  .traveler-step + .traveler-step { @apply border-t border-slate-900/[.07]; }
  .traveler-step__time { @apply pt-1 text-sm font-bold text-slate-800 sm:text-base; }
  .traveler-step__time small { @apply mt-1 block text-[10px] font-medium text-slate-400; }
  .traveler-step__marker { @apply relative z-10 mt-0.5 grid h-8 w-8 place-items-center rounded-full border border-[#d85f4c]/30 bg-[#f7f4ed] text-[9px] font-bold text-[#d85f4c] sm:h-9 sm:w-9; }
  .traveler-step__content { @apply min-w-0 pb-2 pl-1 sm:pl-3; }
  .traveler-status { @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-bold uppercase tracking-[.08em]; }
  .traveler-status svg { @apply h-3 w-3; }
  .traveler-status--approved { @apply bg-emerald-800/10 text-emerald-800; }
  .traveler-status--review { @apply bg-amber-700/10 text-amber-800; }
  .traveler-empty { @apply rounded-[2rem] bg-white/60 px-6 py-12 text-center sm:px-10; }
  .traveler-step-dialog { @apply overflow-hidden rounded-[1.5rem] bg-[#fbfaf7] shadow-2xl; }
  .traveler-nav-link { @apply relative flex min-h-12 flex-col items-center justify-center gap-1 rounded-xl px-3 text-[10px] font-semibold text-white/55 transition-colors lg:min-h-11 lg:flex-row lg:gap-2 lg:text-xs lg:text-slate-500; }
  .traveler-nav-link:hover { @apply text-white lg:bg-white/60 lg:text-slate-900; }
  .traveler-nav-link--active { @apply text-white lg:bg-white lg:text-[#d85f4c] lg:shadow-sm; }
  .traveler-day-rail { scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgb(216 95 76 / .45) transparent; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .traveler-day-rail::-webkit-scrollbar { height: 4px; }
  .traveler-day-rail::-webkit-scrollbar-thumb { @apply rounded-full bg-[#d85f4c]/40; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}