/* =====================================================================
   Cartonia — component primitives
   ---------------------------------------------------------------------
   Requires tokens.css and type.css.

   This is deliberately small. It is not a UI kit — it only covers the
   pieces where the brand rules are easy to get wrong: which colour a
   filled button takes, what focus looks like, how eco and status read.
   Build everything else from tokens.
   ===================================================================== */

/* --- Buttons ------------------------------------------------------
   One action gets clay: "Cere ofertă". Everything else is .btn--quiet
   or a plain underlined link. Ink on clay is 5.22:1; white on clay is
   3.12:1 and fails AA, which is why --action-text is ink.
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-3) var(--space-5);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-brand);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: 1.2;
  font-variation-settings: 'wdth' var(--wdth-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.btn--action {
  background: var(--action-bg);
  color: var(--action-text);
}
.btn--action:hover { background: var(--action-bg-hover); }

.btn--quiet {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--line-hairline);
}
.btn--quiet:hover { border-color: var(--line-strong); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* Touch targets. The scale is compact by design on a fine pointer. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
}

/* --- Surfaces ------------------------------------------------------
   Elevation by tone. No shadows anywhere in this system.
   ------------------------------------------------------------------ */
.card {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card--feature { background: var(--surface-feature); }
.card--sunken  { background: var(--surface-sunken); }
.card--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-color: transparent;
}

/* --- Eco label -----------------------------------------------------
   Green states a fact about the material. It never becomes an action.
   ------------------------------------------------------------------ */
.eco {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--eco-bg);
  color: var(--eco-fg-on-bg);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-spec);
  letter-spacing: var(--tracking-spec);
  text-transform: uppercase;
}
.eco--bare { background: none; color: var(--eco-fg); padding: 0; }
.eco svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* --- Spec list -----------------------------------------------------
   Codes and measurements. Digits line up; labels stay quiet.
   ------------------------------------------------------------------ */
.specs {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.specs th, .specs td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-hairline) solid var(--line-hairline);
}
.specs th {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-spec);
  letter-spacing: var(--tracking-spec);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.specs td {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* --- Form fields ---------------------------------------------------
   The RFQ form is the whole point of the site. Errors say what to fix.
   ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field > label {
  font-family: var(--font-brand);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  font-variation-settings: 'wdth' var(--wdth-ui);
}

.field input, .field textarea, .field select {
  font-family: var(--font-text);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-height: 44px;
}
.field input:hover, .field textarea:hover, .field select:hover {
  border-color: var(--line-strong);
}
.field .hint  { font-size: var(--text-sm); color: var(--text-muted); }
.field .error { font-size: var(--text-sm); color: var(--status-error-fg); }
.field[data-invalid] input,
.field[data-invalid] textarea,
.field[data-invalid] select { border-color: var(--status-error-fg); }

/* --- Status --------------------------------------------------------
   Always paired with a label. Colour is never the only signal.
   ------------------------------------------------------------------ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.alert--ok    { background: var(--status-ok-bg);    color: var(--status-ok-fg); }
.alert--warn  { background: var(--status-warn-bg);  color: var(--status-warn-fg); }
.alert--error { background: var(--status-error-bg); color: var(--status-error-fg); }

/* --- Eyebrow -------------------------------------------------------
   Section labels. Mono, because on this site a label is usually a
   classification, not prose.
   ------------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-spec);
  letter-spacing: var(--tracking-spec);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Logo ----------------------------------------------------------
   Clear space is one band height: 0.0759 × the logo's own width.
   ------------------------------------------------------------------ */
.logo { display: block; height: auto; }
.logo--clear { padding: calc(var(--logo-w, 100%) * var(--clearspace-ratio)); }