/**
 * MASÉR 2.0 — PRIMITIVE COMPONENTS
 *
 * Styly pro primitivní komponenty (Fáze 0, sekce C). Bezstavové, bez
 * byznys kontextu, skládají se výhradně z Design Tokenů.
 */

/* ---------- Button ---------- */
.m2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
  text-decoration: none;
}

/* Primární varianta — jedna dominantní akce na obrazovku (Fáze 0, UX pravidla) */
.m2-btn--primary {
  background: var(--color-action);
  color: var(--color-text-inverse);
}
.m2-btn--primary:hover  { background: var(--color-action-hover); color: var(--color-text-inverse); }
.m2-btn--primary:active { background: var(--color-primary-900); color: var(--color-text-inverse); }
.m2-btn--primary:disabled,
.m2-btn--primary[aria-disabled="true"] {
  background: var(--color-action-disabled);
  color: var(--color-neutral-0);
  cursor: not-allowed;
}

/* Sekundární varianta — outline, nikdy stejně silná jako primární */
.m2-btn--secondary {
  background: transparent;
  border-color: var(--color-action);
  color: var(--color-action);
}
.m2-btn--secondary:hover  { background: var(--color-primary-50); color: var(--color-action); }
.m2-btn--secondary:active { background: var(--color-primary-100); color: var(--color-action-hover); }
.m2-btn--secondary:disabled,
.m2-btn--secondary[aria-disabled="true"] {
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-400);
  cursor: not-allowed;
}

.m2-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-small); }
.m2-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); }

/* Accent (zlatá) — pro CTA na tmavém pozadí, kde primary teal splývá s pozadím */
.m2-btn--accent {
  background: var(--color-accent-500);
  color: var(--color-neutral-900);
}
.m2-btn--accent:hover  { background: var(--color-accent-700); }
.m2-btn--accent:active { background: var(--color-accent-700); }
.m2-btn--accent:disabled,
.m2-btn--accent[aria-disabled="true"] {
  background: var(--color-neutral-300);
  color: var(--color-neutral-0);
  cursor: not-allowed;
}

/* ---------- Badge ---------- */
.m2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.m2-badge--accent  { background: #faf3dc; color: var(--color-accent-700); }
.m2-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.m2-badge--error   { background: var(--color-error-bg); color: var(--color-error); }
.m2-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* ---------- Input / Select ---------- */
.m2-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.m2-field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.m2-field__input,
.m2-field__select {
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.m2-field__input:focus,
.m2-field__select:focus {
  outline: none;
  border-color: var(--color-action);
}

.m2-field--error .m2-field__input,
.m2-field--error .m2-field__select {
  border-color: var(--color-error);
}

.m2-field__message {
  font-size: var(--text-caption);
}
.m2-field__message--error   { color: var(--color-error); }
.m2-field__message--success { color: var(--color-success); }

/* ---------- Search Field ---------- */
.m2-search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  max-width: 480px;
}
.m2-search-field__icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.m2-search-field__input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  color: var(--color-text);
  background: transparent;
}
.m2-search-field__input::placeholder {
  color: var(--color-text-muted);
}

/* ---------- Progress Bar ---------- */
.m2-progress__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.m2-progress__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  overflow: hidden;
}
.m2-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-action);
  transition: width var(--motion-base) var(--motion-ease);
}

/* ---------- Checkbox / Radio ---------- */
.m2-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  cursor: pointer;
}
.m2-check input {
  accent-color: var(--color-action);
  width: 18px;
  height: 18px;
}

/* ---------- Icon ---------- */
.m2-icon {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}
.m2-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* ---------- Text (utility třídy pro odstavcové varianty) ---------- */
.m2-text--lg      { font-size: var(--text-body-lg); }
.m2-text--small   { font-size: var(--text-small); }
.m2-text--caption { font-size: var(--text-caption); color: var(--color-text-muted); }
.m2-text--muted   { color: var(--color-text-muted); }
.m2-text--accent  { color: var(--color-action); }
.m2-text--center  { text-align: center; }