/* QUISO LAB Design System — component styles.
   CSS port of the packaged React components (Button, Kicker, ModuleMark,
   Rule, Input, Tag) so the static site renders identically without a runtime. */

/* ---------------------------------------------------------------- Button */
.qs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.qs-btn:active{transform:translateY(1px)}
.qs-btn--block{display:flex;width:100%}
.qs-btn[disabled],.qs-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* sizes */
.qs-btn--sm{padding:8px 16px;font-size:13px}
.qs-btn--md{padding:11px 22px;font-size:14px}
.qs-btn--lg{padding:15px 30px;font-size:16px}

/* variants */
.qs-btn--primary{background:var(--qs-gold);color:var(--qs-ink);border:1px solid var(--qs-gold)}
.qs-btn--primary:hover:not([disabled]){background:var(--qs-gold-hi);border-color:var(--qs-gold-hi);color:var(--qs-ink)}
.qs-btn--solid{background:var(--qs-ink);color:var(--qs-white);border:1px solid var(--qs-ink)}
.qs-btn--solid:hover:not([disabled]){background:var(--qs-ink-900);border-color:var(--qs-ink-900)}
.qs-btn--outline{background:transparent;color:var(--qs-ink);border:1px solid var(--qs-ink)}
.qs-btn--outline:hover:not([disabled]){background:var(--qs-ink);color:var(--qs-white)}
.qs-btn--ghost{background:transparent;color:var(--qs-ink);border:1px solid transparent}
.qs-btn--ghost:hover:not([disabled]){background:var(--qs-ink-a06)}

/* ------------------------------------------------------------ ModuleMark */
/* The signature 2x2 block glyph. One cell carries the yellow accent. */
.qs-mark{
  --mark-size:16px;
  --mark-cell:calc(var(--mark-size) / 2 - 1.5px);
  display:inline-grid;
  grid-template-columns:repeat(2,var(--mark-cell));
  grid-template-rows:repeat(2,var(--mark-cell));
  gap:3px;
  flex-shrink:0;
  color:var(--qs-ink);
}
.qs-mark--light{color:var(--qs-white)}
.qs-mark > i{border:1.4px solid currentColor;opacity:.4}
.qs-mark > i:first-child{
  background:var(--qs-gold);
  border-color:var(--qs-gold);
  opacity:1;
}

/* ---------------------------------------------------------------- Kicker */
/* The Michroma eyebrow label. Uppercase, wide-tracked, mark-prefixed. */
.qs-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  /* Darker than the token's --text-muted: at 15px the kicker has to clear AA
     on both the white and the #FFD100 sections. */
  color:var(--qs-ink-a70);
}
.qs-kicker--gold{color:var(--qs-gold)}
.qs-kicker--light{color:var(--qs-white-a50)}
.qs-kicker > span{
  font-family:var(--font-head);
  font-size:var(--fs-kicker);
  letter-spacing:var(--ls-kicker);
  text-transform:uppercase;
  line-height:1;
}
.qs-kicker--wide > span{letter-spacing:var(--ls-kicker-wide)}

/* ------------------------------------------------------------------ Rule */
/* The 2px yellow bar used as a section marker / divider accent. */
.qs-rule{
  width:56px;
  height:var(--rule-height);
  background:var(--rule-color);
  border-radius:1px;
  flex-shrink:0;
}

/* ----------------------------------------------------------------- Input */
.qs-field{display:flex;flex-direction:column;gap:7px}
.qs-field > label{
  font-family:var(--font-head);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* --text-muted (#999) da 2,6:1 sobre o #F5F5F3 do card de contato. */
  color:var(--qs-ink-a70);
}
.qs-field input,
.qs-field textarea{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--qs-ink);
  padding:11px 14px;
  background:var(--qs-white);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  outline:none;
  width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.qs-field textarea{resize:vertical}
.qs-field input:focus,
.qs-field textarea:focus{border-color:var(--qs-ink);box-shadow:var(--shadow-focus)}
.qs-field.is-invalid input,
.qs-field.is-invalid textarea{border-color:var(--qs-danger);box-shadow:none}
.qs-field .qs-field-msg{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--qs-danger);
}
.qs-field .qs-field-msg:empty{display:none}

/* ------------------------------------------------------------------- Tag */
.qs-tag{
  font-family:var(--font-display);
  font-weight:var(--fw-light);
  font-size:14px;
  padding:6px 14px;
  border:1px solid var(--qs-ink-a30);
  border-radius:var(--radius-pill);
  color:var(--qs-ink);
  white-space:nowrap;
}