/* Marybeth Cargo — Transcontinental Freight Precision
   Design tokens from DESIGN.md + functional logistics accents.
   Tailwind handles layout; this file handles tokens, motion, a11y. */

:root{
  --signal:#EAB308;
  --signal-deep:#CA8A04;
  --ink:#0B132B;
  --ink-2:#1C2541;
  --canvas:#F1F5F9;
  --card:#FFFFFF;
  --line:#E2E8F0;
  --body:#1E293B;
  --muted:#64748B;
  --blue:#0284C7;
  --green:#10B981;
  --red:#EF4444;
  --radius:8px;
  --shadow-1:0 4px 16px -2px rgba(11,19,43,.05);
  --shadow-2:0 10px 25px -4px rgba(11,19,43,.10);
  --shadow-3:0 20px 35px -8px rgba(11,19,43,.18);
}

html{scroll-behavior:smooth}
body{
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--canvas);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
}
.font-display,.font-headline{font-family:"Space Grotesk",sans-serif}
.mono{font-family:"JetBrains Mono",monospace}

/* Focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(234,179,8,.55);
  outline-offset:2px;
  border-radius:6px;
}

/* Hero flight-path drift */
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(14px)}100%{transform:translateX(0)}}
.flight-path{animation:drift 9s ease-in-out infinite}

@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(234,179,8,.55)}
  70%{box-shadow:0 0 0 12px rgba(234,179,8,0)}
  100%{box-shadow:0 0 0 0 rgba(234,179,8,0)}
}
.pulse-ring{animation:pulse-ring 2.2s infinite}

/* Timeline */
.timeline{display:flex;align-items:center;gap:.5rem;margin:.75rem 0}
.timeline .node{width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:2px solid #CBD5E1;background:#fff;color:#94A3B8}
.timeline .node.done{background:var(--ink);border-color:var(--ink);color:var(--signal)}
.timeline .node.active{background:var(--signal);border-color:var(--ink);color:var(--ink)}
.timeline .bar{flex:1;height:3px;border-radius:9999px;background:#CBD5E1;position:relative;overflow:hidden}
.timeline .bar.done{background:var(--ink)}
.timeline .bar.active{background:repeating-linear-gradient(90deg,var(--signal) 0 8px,transparent 8px 14px)}

/* Range slider */
input[type="range"]{accent-color:var(--signal)}
input[type="range"]::-webkit-slider-thumb{cursor:pointer}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);border-radius:12px}
.card-hover{transition:box-shadow .2s ease,transform .2s ease}
.card-hover:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}

/* Operations slideshow */
.ops-slide{transition:opacity .6s ease;z-index:1}
.ops-slide.opacity-100{z-index:2}
.ops-dot{transition:background-color .2s ease}
.ops-thumb{transition:border-color .2s ease,opacity .2s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flight-path,.pulse-ring{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .ops-slide{transition:none}
}

/* Print: waybill */
@media print{
  header,.no-print,footer .no-print{display:none!important}
  body{background:#fff}
}