/* Componentes — consomem apenas tokens de componente (--button-*, --card-* ...) e semânticos. */

/* ===== Botão ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-2);
  min-height: var(--button-md-height);
  padding-inline: var(--button-md-padding-x);
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  font-size: var(--button-md-font-size);
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  transition: background-color var(--primitive-duration-normal) var(--primitive-easing-standard),
              color var(--primitive-duration-normal) var(--primitive-easing-standard),
              border-color var(--primitive-duration-normal) var(--primitive-easing-standard);
}
.btn:hover { background: var(--button-primary-hover-bg); color: var(--button-primary-fg); }
.btn:active { background: var(--button-primary-active-bg); }

.btn--accent { background: var(--button-accent-bg); color: var(--button-accent-fg); }
.btn--accent:hover { background: var(--button-accent-hover-bg); color: var(--button-accent-fg); }
.btn--accent:active { background: var(--button-accent-active-bg); }

.btn--outline { background: transparent; color: var(--button-outline-fg); border-color: var(--button-outline-border); }
.btn--outline:hover { background: var(--button-outline-hover-bg); color: var(--button-outline-fg); }

.btn--ghost { background: transparent; color: var(--button-ghost-fg); }
.btn--ghost:hover { background: var(--button-ghost-hover-bg); color: var(--button-ghost-fg); }

.btn--destructive { background: var(--button-destructive-bg); color: var(--button-destructive-fg); }
.btn--destructive:hover { background: var(--button-destructive-hover-bg); color: var(--button-destructive-fg); }

/* Botão de WhatsApp: sempre verde do app, texto marinho (o branco não atinge contraste sobre #25D366) */
.btn--whatsapp { background: var(--button-whatsapp-bg); color: var(--button-whatsapp-fg); }
.btn--whatsapp:hover { background: var(--button-whatsapp-hover-bg); color: var(--button-whatsapp-fg); }
.btn--whatsapp:active { background: var(--button-whatsapp-active-bg); }
.btn--whatsapp .icon { width: 1.25em; height: 1.25em; }
/* Cresce 5% no mouse sobre, com easing. Só em dispositivos com mouse; no celular (toque) o botão fica estático */
.btn--whatsapp {
  transition: background-color var(--primitive-duration-normal) var(--primitive-easing-standard),
              color var(--primitive-duration-normal) var(--primitive-easing-standard),
              border-color var(--primitive-duration-normal) var(--primitive-easing-standard),
              transform var(--primitive-duration-normal) var(--primitive-easing-standard);
}
@media (hover: hover) and (pointer: fine) { .btn--whatsapp:hover { transform: scale(1.05); } }

.btn--sm { min-height: var(--button-sm-height); padding-inline: var(--button-sm-padding-x); font-size: var(--button-sm-font-size); }
.btn--lg { min-height: var(--button-lg-height); padding-inline: var(--button-lg-padding-x); font-size: var(--button-lg-font-size); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--button-disabled-opacity); cursor: not-allowed; pointer-events: none; }

/* Em fundo escuro (hero/nav), o contorno usa o destaque */
.on-inverse .btn--outline { color: var(--color-inverse-accent); border-color: var(--color-inverse-accent); }
.on-inverse .btn--outline:hover { background: rgb(255 255 255 / 0.08); color: var(--color-inverse-accent); }

/* ===== Campos de formulário ===== */
.field { display: grid; gap: var(--primitive-spacing-2); }
.field > label {
  font-family: var(--input-label-font-family);
  font-weight: var(--input-label-font-weight);
  font-size: var(--type-small-size);
  color: var(--color-heading);
}
.field .hint { font-size: var(--type-caption-size); color: var(--color-foreground-muted); }
.field .error-text { font-size: var(--type-caption-size); color: var(--color-error-strong); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--primitive-spacing-2) var(--input-padding-x);
  font: inherit;
  color: var(--input-fg);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--primitive-duration-fast) var(--primitive-easing-standard),
              box-shadow var(--primitive-duration-fast) var(--primitive-easing-standard);
}
.textarea { min-height: 7rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--input-placeholder); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--input-hover-border); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus-border) 25%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--input-error-border); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--input-disabled-bg); cursor: not-allowed; opacity: 0.7; }

/* ===== Card ===== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--primitive-duration-normal) var(--primitive-easing-standard);
}
.card:hover { box-shadow: var(--card-hover-shadow); }
.card__icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: var(--primitive-spacing-4);
  border-radius: var(--primitive-radius-md);
  background: var(--card-icon-bg); color: var(--card-icon-fg);
  font-family: var(--font-heading); font-weight: var(--primitive-font-weight-extrabold);
}
.card h3 { margin-bottom: var(--primitive-spacing-2); }
.card p:last-child { margin-bottom: 0; }

/* ===== Badge ===== */
.badge {
  display: inline-block;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: var(--type-caption-size);
  font-weight: var(--primitive-font-weight-semibold);
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: var(--badge-radius);
}

/* ===== Alertas de sistema ===== */
.alert {
  --alert-color: var(--color-info);
  --alert-text: var(--color-info-strong);
  padding: var(--alert-padding);
  border-left: var(--alert-border-width) solid var(--alert-color);
  border-radius: var(--alert-radius);
  background: color-mix(in srgb, var(--alert-color) var(--alert-bg-mix), var(--color-surface));
  color: var(--color-foreground);
  font-size: var(--type-small-size);
}
.alert strong { display: block; font-family: var(--font-heading); color: var(--alert-text); }
.alert--success { --alert-color: var(--color-success); --alert-text: var(--color-success-strong); }
.alert--warning { --alert-color: var(--color-warning); --alert-text: var(--color-warning-strong); }
.alert--error   { --alert-color: var(--color-error);   --alert-text: var(--color-error-strong); }

/* ===== Navegação ===== */
.nav {
  position: sticky; top: 0; z-index: var(--primitive-z-sticky);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--primitive-spacing-4); min-height: var(--nav-height); flex-wrap: wrap; }
.nav__brand { display: inline-flex; align-items: center; gap: var(--primitive-spacing-3); color: var(--color-inverse-foreground); text-decoration: none; font-family: var(--font-heading); font-weight: var(--primitive-font-weight-extrabold); font-size: var(--primitive-font-size-lg); }
.nav__brand img { height: 2rem; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--primitive-spacing-6); flex-wrap: wrap; }
.nav__links a:not(.btn) { color: var(--nav-fg); text-decoration: none; font-size: 0.9375rem; }
.nav__links a:not(.btn):hover { color: var(--nav-fg-hover); }
.nav :focus-visible { outline-color: var(--color-inverse-accent); }

/* ===== Hero ===== */
.hero {
  background-color: var(--hero-bg);
  background-image: var(--hero-glow);
  color: var(--hero-fg);
  padding-block: var(--hero-padding-y);
}
.hero h1, .hero .t-display { color: var(--hero-fg); }
.hero h1 em, .hero .t-display em { font-style: normal; color: var(--hero-eyebrow-fg); }
.hero .t-eyebrow { color: var(--hero-eyebrow-fg); }
.hero .t-lead { color: var(--hero-lead-fg); max-width: 38rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-3); margin-top: var(--primitive-spacing-8); }

/* ===== Seção e citação ===== */
.section { padding-block: var(--spacing-section); }
.section--alt { background: var(--color-surface-alt); }
.quote { background: var(--quote-bg); color: var(--quote-fg); padding-block: var(--primitive-spacing-12); }
.quote blockquote { margin: 0; max-width: 48rem; font-family: var(--font-heading); font-weight: var(--primitive-font-weight-bold); font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.3; }
.quote cite { display: block; margin-top: var(--primitive-spacing-3); font-style: normal; font-family: var(--font-body); font-size: var(--type-small-size); color: var(--quote-cite-fg); }

/* ===== Logo ===== */
.logo { display: inline-block; height: 2.5rem; width: auto; }