/* ============================================================
   Zookoutek u Nováčků — Design Tokens
   Import this file (or copy :root) into any artifact.
   System font stack — no webfonts. Body minimum 15px is strict.
   ============================================================ */

:root {
  /* ---------- Brand palette ---------- */
  --zk-brown:          #5a3a1e;  /* primary text, primary surfaces */
  --zk-brown-soft:     #8a6a4a;  /* muted text, pill text */
  --zk-brown-deep:     #3d2713;  /* pressed brown, headings on cream */
  --zk-cream:          #f8f5f0;  /* default background */
  --zk-cream-deep:     #efe9de;  /* alt background, inputs */
  --zk-border:         #d4c4a8;  /* default border, separators */
  --zk-border-strong:  #b8a282;  /* hover / focused border */

  --zk-orange:         #ff8c42;  /* accent — CTAs, focus rings */
  --zk-orange-press:   #f07d30;  /* orange hover/press */
  --zk-orange-soft:    #ffe0cc;  /* orange tint backgrounds */

  --zk-white:          #ffffff;
  --zk-success:        #5a8a3e;
  --zk-warning:        #c77a1e;
  --zk-error:          #b84a2e;

  /* ---------- Trail theme backgrounds (pastel) ---------- */
  --zk-theme-llama: #f5ead8;  /* 🦙 u Nováčků home (llama in logo, unnamed) */
  --zk-theme-fox:   #fde8d1;  /* 🦊 woodland */
  --zk-theme-cow:   #e8f0e0;  /* 🐄 farm */
  --zk-theme-goat:  #ece5d8;  /* 🐐 meadow */
  --zk-theme-bear:  #e6dcc8;  /* 🐻 forest */

  /* ---------- Semantic color assignments ---------- */
  --fg-1:         var(--zk-brown);
  --fg-2:         var(--zk-brown-soft);
  --fg-on-accent: #ffffff;
  --bg-1:         var(--zk-cream);
  --bg-2:         var(--zk-white);
  --bg-3:         var(--zk-cream-deep);
  --border-1:     var(--zk-border);
  --border-2:     var(--zk-border-strong);
  --accent:       var(--zk-orange);
  --accent-press: var(--zk-orange-press);
  --focus-ring:   var(--zk-orange);

  /* ---------- Typography ---------- */
  /* CANONICAL Zookoutek typeface — native system stack, no webfonts.
     Zero load time · perfect Czech diacritics on every OS · no licensing. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — body minimum 15px enforced (Google mobile usability) */
  --text-xs:   13px;   /* captions, metadata only — never body */
  --text-sm:   15px;   /* body MIN */
  --text-base: 16px;   /* body default */
  --text-md:   17px;   /* body comfortable */
  --text-lg:   19px;   /* CTAs, station prompts */
  --text-h3:   18px;   /* h3 */
  --text-h2:   22px;   /* h2 */
  --text-h1:   28px;   /* h1 */

  --leading-tight: 1.2;
  --leading-body:  1.5;

  /* System stack reliably offers 400 / 700 / 800 on every OS */
  --weight-regular: 400;
  --weight-bold:    700;  /* pills, labels, body emphasis */
  --weight-heavy:   800;  /* all headings + CTAs */

  /* ---------- Radii ---------- */
  --radius-sm:   10px;  /* small inputs */
  --radius-md:   14px;  /* cards, images */
  --radius-lg:   16px;  /* buttons, large inputs */
  --radius-xl:   20px;  /* CTAs, prominent surfaces */
  --radius-full: 999px; /* pills */

  /* ---------- Shadows ---------- */
  --shadow-rest:  0 1px 2px rgba(90, 58, 30, 0.06);
  --shadow-hover: 0 6px 16px rgba(90, 58, 30, 0.10);
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px var(--zk-orange);

  /* ---------- Spacing (4px grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;

  /* ---------- Tap targets ---------- */
  --tap-indoor:  44px;
  --tap-outdoor: 56px;   /* player PWA default */
  --tap-outdoor-lg: 60px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --dur-press: 80ms;
  --dur-std:   150ms;
}

/* ============================================================
   Base element styles — opt-in by applying .zk to a root.
   ============================================================ */

.zk {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

.zk h1, .zk .h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  color: var(--zk-brown);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
.zk h2, .zk .h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  color: var(--zk-brown);
  margin: 0 0 var(--s-3);
}
.zk h3, .zk .h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  color: var(--zk-brown);
  margin: 0 0 var(--s-3);
}
.zk p, .zk .p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}
.zk small, .zk .caption {
  font-size: var(--text-xs);
  color: var(--fg-2);
}
.zk code, .zk .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Focus ring — always orange, never browser blue */
.zk :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Component primitives
   ============================================================ */

.zk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-outdoor);
  padding: 0 var(--s-6);
  background: var(--zk-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  cursor: pointer;
  transition: background var(--dur-std) var(--ease-standard),
              transform var(--dur-press) var(--ease-standard);
}
.zk-btn:hover { background: var(--zk-orange-press); }
.zk-btn:active { transform: scale(0.98); }

.zk-btn--secondary {
  background: var(--zk-white);
  color: var(--zk-brown);
  border: 1px solid var(--zk-border);
}
.zk-btn--secondary:hover {
  background: var(--zk-cream);
  border-color: var(--zk-border-strong);
}

.zk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: var(--zk-cream);
  border: 1px solid var(--zk-border);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--zk-brown-soft);
}
.zk-pill--active {
  background: var(--zk-orange);
  border-color: var(--zk-orange);
  color: #fff;
}

.zk-card {
  background: var(--zk-white);
  border: 1px solid var(--zk-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur-std) var(--ease-standard),
              box-shadow var(--dur-std) var(--ease-standard),
              border-color var(--dur-std) var(--ease-standard);
}
.zk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--zk-orange);
}

.zk-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  background: var(--zk-white);
  border: 1px solid var(--zk-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  transition: border-color var(--dur-std) var(--ease-standard);
}
.zk-input:focus {
  outline: none;
  border-color: var(--zk-orange);
  box-shadow: 0 0 0 3px var(--zk-orange-soft);
}