/* ---------------------------------
   BUTTONS
---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  min-height: 42px;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.08s ease;
  outline: none;
  gap: 0.35rem;
}

.btn:focus-visible {
  box-shadow: var(--shadow-cyan-glow);
  outline: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-light);
}

.btn-primary:active {
  background: var(--color-accent);
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--color-bg-panel);
  color: var(--color-text-main);
  border: 1px solid var(--color-primary-light);
}

.btn-secondary:hover {
  background: var(--color-bg-panel-soft);
  border-color: var(--color-accent);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-main);
  border: 1px solid var(--color-bg-panel-soft);
}

.btn-ghost:hover {
  background: var(--color-bg-panel);
  border-color: var(--color-primary-light);
}

.btn-small {
  min-height: 34px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
}

/* Jednotný systém akčních tlačítek pro úvodní i vnitřní stránky. */
.button,
.btn {
  min-height: 46px;
  padding: 0 1.25rem;
  gap: 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--action-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.button:not(.button--light, .button--ghost),
.btn-primary {
  color: var(--action-text);
  background: var(--action-bg);
  border: 1px solid var(--action-bg);
}

.button:not(.button--light, .button--ghost):hover,
.btn-primary:hover {
  color: var(--action-text);
  background: var(--action-bg-hover);
  border-color: var(--action-bg-hover);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--action-bg) 28%, transparent);
  transform: translateY(-2px);
}

.button--ghost,
.btn-secondary,
.btn-ghost {
  color: var(--action-outline-text);
  background: var(--action-outline-bg);
  border: 1px solid var(--action-outline-border);
}

.button--ghost:hover,
.btn-secondary:hover,
.btn-ghost:hover {
  color: var(--action-outline-text);
  background: var(--action-outline-bg-hover);
  border-color: var(--action-outline-border-hover);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--action-outline-border) 22%, transparent);
  transform: translateY(-2px);
}

[data-theme="dark"] .button--ghost:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-ghost:hover {
  color: var(--navy-950);
}

.button:active,
.btn:active {
  box-shadow: none;
  transform: translateY(0);
}

.button--small,
.btn-small {
  min-height: 38px;
  padding-inline: 0.95rem;
  font-size: 0.84rem;
}