/* ==========================================================
   ParkFlow design tokens
   Palette grounded in the subject: asphalt at dusk, lane-marking
   amber, and traffic-light semantics for state (green = go/paid,
   red = stop/unpaid). Not a generic SaaS dark theme.
   ========================================================== */
:root {
  --asphalt:        #12141c;
  --asphalt-raised: #1b1e29;
  --asphalt-line:   rgba(255, 255, 255, 0.07);
  --lane-amber:     #f2a93b;
  --lane-amber-dim: #7a5a22;
  --signal-green:   #34d399;
  --signal-red:     #f2545b;
  --mist:           #8b93a7;
  --mist-bright:    #c7cbd9;
  --paper:          #f7f5f0;
}

* { box-sizing: border-box; }

html, body {
  background: var(--asphalt);
  color: var(--mist-bright);
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display { font-family: 'Sora', 'Inter', ui-sans-serif, sans-serif; }
.font-data     { font-family: 'JetBrains Mono', ui-monospace, monospace; }

[x-cloak] { display: none !important; }

/* Subtle lane-marking texture on the kiosk background, used once,
   not repeated as decoration elsewhere. */
.lane-backdrop {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(242, 169, 59, 0.08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(52, 211, 153, 0.06), transparent 45%);
}

.lane-dashes {
  background-image: repeating-linear-gradient(
    90deg,
    var(--lane-amber-dim) 0 28px,
    transparent 28px 52px
  );
  height: 3px;
  opacity: 0.55;
  animation: dash-scroll 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lane-dashes { animation: none; }
}
@keyframes dash-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: -52px; }
}

/* ---- Boom barrier, the one orchestrated motion moment ---- */
.barrier-wrap {
  position: relative;
  width: 220px;
  height: 130px;
}
.barrier-post {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 16px;
  height: 100%;
  background: var(--asphalt-raised);
  border: 1px solid var(--asphalt-line);
  border-radius: 4px;
}
.barrier-arm {
  position: absolute;
  left: 12px;
  bottom: 108px;
  width: 190px;
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--lane-amber) 0 22px, #e8e8e8 22px 44px);
  border-radius: 3px;
  transform-origin: 8px 7px;
  transform: rotate(0deg);
  transition: transform 900ms cubic-bezier(.34,1.4,.4,1);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.barrier-wrap.is-open .barrier-arm {
  transform: rotate(-78deg);
}
.barrier-base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 18px;
  background: var(--asphalt-raised);
  border-radius: 4px;
  border: 1px solid var(--asphalt-line);
}

/* ---- Ticket stub: perforated edge, grounded in a real parking
   ticket rather than a generic card ---- */
.ticket-stub {
  position: relative;
  background: var(--paper);
  color: #1c1c1c;
  border-radius: 14px;
}
.ticket-stub::before,
.ticket-stub::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--asphalt);
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.ticket-stub::before { top: -11px; }
.ticket-stub::after  { bottom: -11px; }
.ticket-perf {
  border-top: 2px dashed #d8d4c9;
}

/* Focus visibility, kept even in a dark theme */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--lane-amber);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--asphalt); }
::-webkit-scrollbar-thumb { background: #2a2e3d; border-radius: 6px; }

.pulse-dot {
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.25);
  border-top-color: var(--lane-amber);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }