/* ─────────────────────────────────────────────────────────────
   SHOPTET DESIGN SYSTEM — shared styles
   Linked from každé podstránky přes:
     <link rel="stylesheet" href="./shoptet-shared.css">
   Funguje i z file:// (CSS link je v pohodě).
───────────────────────────────────────────────────────────── */

html{ background:#F9FAFB; }
body{
  font-family:'Geist',ui-sans-serif,system-ui,sans-serif;
  background:#F9FAFB;
  color:#0A0A0A;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  letter-spacing:-0.011em;
}
::selection{ background:#2563EB; color:#FFFFFF; }

/* ─── Surfaces (Bento 2.0) ──────────────────────────────── */
.diffusion{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 20px 40px -15px rgba(15,23,42,0.06),
    0 60px 100px -40px rgba(15,23,42,0.10);
}
.diffusion-soft{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 30px -10px rgba(15,23,42,0.06);
}
.surface{
  background:#FFFFFF;
  border:1px solid rgba(15,23,42,0.06);
  border-radius: 2rem;
}
.surface-lg{ border-radius: 2.5rem; }

/* ─── Glass (nav, modals) ───────────────────────────────── */
.glass{
  background: rgba(255,255,255,0.72);
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(15,23,42,0.04),
    0 8px 32px -8px rgba(15,23,42,0.08);
}

/* ─── Ambient backgrounds ───────────────────────────────── */
.dotgrid{
  background-image: radial-gradient(rgba(15,23,42,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ─── Marquee (kinetic, infinite) ───────────────────────── */
.marquee{
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee-track{
  display:inline-flex; gap:4rem; padding:.5rem 0;
  animation: shoptet-scroll 36s linear infinite;
  will-change: transform;
}
@keyframes shoptet-scroll {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* ─── Live status dot (pulse halo) ──────────────────────── */
@keyframes shoptet-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.dot-live{ animation: shoptet-pulse 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }

/* ─── A11y focus ──────────────────────────────────────── */
*:focus-visible{
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Boot fallback (visible before React mounts) ───────── */
#boot{
  min-height: 100vh; display:grid; place-items:center;
  color:#94A3B8; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  font-family:'Geist Mono', ui-monospace, monospace;
}
#boot .dot{
  display:inline-block; width:6px; height:6px; border-radius:999px;
  background:#2563EB; margin-right:8px;
  animation: shoptet-pulse 1.5s ease infinite;
}
#err{
  color:#DC2626; padding:24px;
  font-family:'Geist Mono',ui-monospace, monospace; font-size:13px;
  white-space:pre-wrap; max-width:900px; margin:40px auto;
  background:#FEF2F2; border:1px solid #FECACA; border-radius:12px;
}