/* =====================================================================
   VA CLASSES — components.css
   Reusable component classes built on colors_and_type.css tokens.
   Used by preview cards AND the UI kits.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* BUTTONS                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 15px;
  line-height: 1; letter-spacing: -0.01em;
  padding: 13px 20px; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer; user-select: none;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus-ring); }
.btn svg { width: 18px; height: 18px; }

/* Primary — ink */
.btn-primary { background: var(--ink-900); color: var(--fg-on-dark); border-color: var(--ink-900); }
.btn-primary:hover { background: var(--ink-700); border-color: var(--ink-700); }
.btn-primary:active { transform: translateY(1px); background: var(--ink-800); }

/* Yellow — the loud brand CTA */
.btn-yellow { background: var(--brand-yellow); color: var(--ink-900); border-color: var(--brand-yellow); }
.btn-yellow:hover { background: var(--brand-yellow-deep); border-color: var(--brand-yellow-deep); }
.btn-yellow:active { transform: translateY(1px); }

/* Pop — signature: yellow + ink border + hard offset shadow */
.btn-pop {
  background: var(--brand-yellow); color: var(--ink-900); border-color: var(--ink-900);
  box-shadow: var(--shadow-hard);
}
.btn-pop:hover { box-shadow: var(--shadow-hard-lg); transform: translate(-1px,-1px); }
.btn-pop:active { box-shadow: 1px 1px 0 0 var(--ink-900); transform: translate(2px,2px); }

/* Outline */
.btn-outline { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-outline:hover { background: var(--ink-900); color: var(--fg-on-dark); }
.btn-outline:active { transform: translateY(1px); }

/* Ghost */
.btn-ghost { background: transparent; color: var(--ink-900); border-color: transparent; }
.btn-ghost:hover { background: var(--paper-2); }

.btn[disabled], .btn.is-disabled { opacity: 0.4; pointer-events: none; }

.btn-sm { padding: 9px 14px; font-size: 13.5px; border-radius: var(--r-xs); }
.btn-lg { padding: 16px 26px; font-size: 17px; border-radius: var(--r-md); }
.btn-block { display: flex; width: 100%; }

/* ------------------------------------------------------------------ */
/* FORM FIELDS                                                         */
/* ------------------------------------------------------------------ */
.field-label { display: block; font: var(--label); margin-bottom: 6px; color: var(--ink-900); }
.field {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--ink-900);
  background: var(--white); border: 1.5px solid var(--cloud-2); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field::placeholder { color: var(--fg-3); }
.field:hover { border-color: var(--stone-500); }
.field:focus { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 3px var(--brand-yellow-soft); }
.field.is-error { border-color: var(--danger); }
.field.is-error:focus { box-shadow: 0 0 0 3px var(--danger-tint); }
textarea.field { resize: vertical; min-height: 88px; }

.field-hint { font: var(--caption); color: var(--fg-2); margin-top: 6px; }
.field-error { font: var(--caption); color: var(--danger); margin-top: 6px; }

/* Checkbox / radio (custom, square-ish, bold) */
.check { display: inline-flex; align-items: center; gap: 10px; font: var(--body-sm); cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check .box {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ink-900);
  background: var(--white); flex: none; display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.check .box::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--ink-900);
  border-bottom: 2.5px solid var(--ink-900); transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.check input:checked + .box { background: var(--brand-yellow); }
.check input:checked + .box::after { opacity: 1; }
.check input:focus-visible + .box { box-shadow: 0 0 0 3px var(--brand-yellow-soft); }

/* Toggle */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--cloud-2);
  border: none; cursor: pointer; transition: background var(--dur) var(--ease-out); flex: none; }
.toggle::after { content:""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); transition: left var(--dur) var(--ease-out); }
.toggle[aria-checked="true"] { background: var(--ink-900); }
.toggle[aria-checked="true"]::after { left: 23px; background: var(--brand-yellow); }

/* ------------------------------------------------------------------ */
/* BADGES / CHIPS / PILLS                                              */
/* ------------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; font: var(--w-bold) 12px/1 var(--font-sans);
  letter-spacing: 0.02em; padding: 6px 10px; border-radius: var(--r-xs); white-space: nowrap; }
.badge-yellow { background: var(--brand-yellow); color: var(--ink-900); }
.badge-ink { background: var(--ink-900); color: var(--fg-on-dark); }
.badge-soft { background: var(--brand-yellow-soft); color: var(--ink-800); }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-info { background: var(--info-tint); color: var(--info); }
.badge-outline { background: transparent; color: var(--ink-900); border: 1.5px solid var(--cloud-2); }

.chip { display: inline-flex; align-items: center; gap: 7px; font: var(--label); font-weight: var(--w-medium);
  padding: 8px 13px; border-radius: var(--r-pill); background: var(--white); border: 1.5px solid var(--cloud-2);
  cursor: pointer; transition: all var(--dur) var(--ease-out); }
.chip:hover { border-color: var(--ink-900); }
.chip.is-active { background: var(--ink-900); color: var(--fg-on-dark); border-color: var(--ink-900); }

/* Status dot pill */
.status { display: inline-flex; align-items: center; gap: 7px; font: var(--caption); color: var(--fg-2); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ------------------------------------------------------------------ */
/* CARDS                                                              */
/* ------------------------------------------------------------------ */
.card-surface { background: var(--white); border: 1.5px solid var(--cloud); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); }
.card-pop { background: var(--white); border: 2px solid var(--ink-900); border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard); }

/* ------------------------------------------------------------------ */
/* PROGRESS                                                           */
/* ------------------------------------------------------------------ */
.progress { height: 10px; background: var(--cloud); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand-yellow); border-radius: 999px; }