/* =====================================================================
   LAMAS DESTILARIA — COMPONENTES DE REFERÊNCIA
   Requer css/lamas-tokens.css carregado antes.
   ===================================================================== */

/* =====================================================================
   COMPONENTES — implementação de referência em CSS puro, só com tokens.
   Espelha os component sets do Figma (páginas 03 a 09).
   ===================================================================== */

/* ---------- Foco visível (recomendado; ver Pendências: focus/ring ainda não aplicado nos componentes do Figma) ---------- */
.btn:focus-visible, .toggle:focus-visible, .accordion__header:focus-visible, .field:focus-within, a:focus-visible {
  outline: var(--size-border-focus) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-control-gap-md);
  height: var(--size-control-md);
  padding: 0 var(--space-control-pad-x-md);
  border: var(--size-border-hairline) solid transparent;
  border-radius: var(--radius-button);
  background: transparent; color: var(--color-text-primary);
  font-family: var(--font-family-body); font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.btn--squared { border-radius: var(--radius-button-squared); }
.btn--sm { height: var(--size-control-sm); padding: 0 var(--space-control-pad-x-sm); gap: var(--space-control-gap-sm); }
.btn--lg { height: var(--size-control-lg); padding: 0 var(--space-control-pad-x-lg); gap: var(--space-control-gap-lg); }
.btn--block { width: 100%; }
.btn svg { width: var(--size-icon-md); height: var(--size-icon-md); }

.btn--primary { background: var(--color-action-primary-bg); color: var(--color-action-on-primary); }
.btn--primary:hover { background: var(--color-action-primary-bg-hover); }
.btn--secondary { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.btn--secondary:hover { background: var(--color-action-quiet-bg); border-color: var(--color-text-primary); }
.btn--ghost:hover { background: var(--color-action-quiet-bg); }

.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--color-action-disabled-text); }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: var(--color-action-disabled-bg); }
.btn--secondary:disabled, .btn--secondary[aria-disabled="true"] { background: transparent; border-color: var(--color-border-default); }
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { background: transparent; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: var(--space-inset-tag-y) var(--space-inset-tag-x);
  border-radius: var(--radius-tag);
  font-family: var(--font-family-body); font-weight: 500; font-size: 12px; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--color-action-quiet-bg); color: var(--color-text-primary);
}
.badge--gold    { background: var(--color-accent-signature); color: var(--color-accent-on-accent); }
.badge--danger  { background: var(--color-feedback-danger);  color: var(--color-feedback-on-feedback); }
.badge--success { background: var(--color-feedback-success); color: var(--color-feedback-on-feedback); }

/* ---------- Toggle ---------- */
.toggle {
  position: relative; flex: none;
  width: var(--size-toggle-track); height: calc(var(--size-toggle-knob) + 2 * var(--space-1));
  padding: var(--space-1); border: 0; border-radius: var(--radius-pill);
  background: var(--color-border-strong); cursor: pointer;
  transition: background-color 150ms ease-out;
}
.toggle::after {
  content: ""; position: absolute; top: var(--space-1); left: var(--space-1);
  width: var(--size-toggle-knob); height: var(--size-toggle-knob);
  border-radius: var(--radius-pill); background: var(--color-action-on-primary);
  transition: transform 150ms ease-out;
}
.toggle[aria-checked="true"] { background: var(--color-action-primary-bg); }
.toggle[aria-checked="true"]::after { transform: translateX(var(--size-toggle-knob)); }
.toggle:disabled { cursor: not-allowed; background: var(--color-border-default); }
.toggle[aria-checked="true"]:disabled { background: var(--color-action-disabled-text); }

/* ---------- Input ---------- */
.field {
  display: flex; align-items: center; gap: var(--space-control-gap-md);
  height: var(--size-control-md); padding: 0 var(--space-field-pad-x-md);
  background: var(--color-bg-base);
  border: var(--size-border-hairline) solid var(--color-border-default); /* ⚠ ver Pendências (contraste) */
  border-radius: var(--radius-field);
  color: var(--color-text-primary);
  min-width: 0;
}
.field input {
  flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; outline: none;
  font-family: var(--font-family-body); font-size: 16px; line-height: 1.6; color: inherit;
}
.field input::placeholder { color: var(--color-text-disabled); }
.field--sm { height: var(--size-control-sm); padding: 0 var(--space-field-pad-x-sm); gap: var(--space-control-gap-sm); }
.field--sm input { font-size: 14px; line-height: 1.4; }
.field--lg { height: var(--size-control-lg); padding: 0 var(--space-field-pad-x-lg); gap: var(--space-control-gap-lg); }
.field--filled { border-color: var(--color-border-strong); }
.field:focus-within { border-color: var(--color-focus-ring); box-shadow: 0 0 0 1px var(--color-focus-ring); outline: none; }
.field--error, .field--error:focus-within { border-color: var(--color-feedback-danger); box-shadow: 0 0 0 1px var(--color-feedback-danger); }
.field--disabled { background: var(--color-action-disabled-bg); color: var(--color-text-disabled); }
.field--disabled input { cursor: not-allowed; }

/* ---------- Form Field (rótulo + campo + ajuda) ---------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-field-stack-gap); }
.form-field__label { font-family: var(--font-family-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-text-primary); }
.form-field__helper { font-family: var(--font-family-body); font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--color-text-secondary); margin: 0; }
.form-field--error .form-field__helper { color: var(--color-feedback-danger); }
.form-field--disabled .form-field__label, .form-field--disabled .form-field__helper { color: var(--color-text-disabled); }

/* ---------- Accordion Item ---------- */
.accordion__item { border-bottom: var(--size-border-hairline) solid var(--color-border-default); }
.accordion__header {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-4) 0; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-family-body); font-size: 20px; line-height: 1.2; color: var(--color-text-primary);
}
.accordion__header span { flex: 1; }
.accordion__chevron { width: var(--size-icon-lg); height: var(--size-icon-lg); flex: none; color: var(--color-text-primary); transition: transform 200ms ease-out; }
.accordion__header[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { padding: 0 0 var(--space-6); font-family: var(--font-family-body); font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }
.accordion__panel[hidden] { display: none; }
.accordion__panel ul { list-style: none; margin: 0; padding: 0; }
.accordion__panel a { color: inherit; text-decoration: none; }
.accordion__panel a:hover { color: var(--color-text-primary); }

/* ---------- Card de produto (padrão — ainda não é componente no Figma) ---------- */
.product-card {
  display: flex; flex-direction: column; width: var(--size-card-product);
  background: var(--color-bg-base); border: var(--size-border-hairline) solid var(--color-border-default);
  border-radius: var(--radius-surface); overflow: hidden;
}
.product-card__media { position: relative; height: 246px; background: var(--color-surface-alt); border-radius: var(--radius-media); display: grid; place-items: center; color: var(--color-text-disabled); }
.product-card__media .badge { position: absolute; top: var(--space-4); right: var(--space-4); }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-stack-lg); padding: var(--space-4) var(--space-4) var(--space-6); }
.product-card__meta { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-stack-sm); border-bottom: var(--size-border-hairline) solid var(--color-border-default); }
.product-card__meta .t-caption { color: var(--color-text-secondary); }
.product-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-stack-sm); }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border: var(--size-border-hairline) solid var(--color-border-strong); border-radius: var(--radius-tag); font-family: var(--font-family-body); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-primary); background: transparent; cursor: pointer; }
.chip[aria-pressed="false"] { border-color: var(--color-border-default); color: var(--color-text-disabled); }

/* ---------- Carrossel (mobile) ---------- */
.carousel { display: flex; gap: var(--space-layout-gutter-mobile); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-layout-margin-mobile); padding: 0 var(--space-layout-margin-mobile) var(--space-2); scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: none; scroll-snap-align: start; }