/* ============================================================
   Belong — base reset + foundational classes.
   Tokens live in tokens/*.css. This file styles raw chrome and a
   few brand utility classes used across cards and components.
   ============================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--paper);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--clay); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--lime-f); color: var(--ink); }

/* ---------- buttons ----------
   Apricot-discipline: signal, never a plane.
   Apricot CTAs carry DARK (forest) text — never white-on-apricot,
   never apricot-text-on-white. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: 1;
  border-radius: var(--radius);
  padding: 11px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary {
  background: var(--lime);
  color: var(--navy);          /* dark text on apricot */
  border-color: var(--lime);
}
.btn--primary:hover:not(:disabled) { background: var(--clay); color: var(--on-dark); border-color: var(--clay); }
.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-mid);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--navy); }
.btn--ghost {
  background: transparent;
  color: var(--clay);
  border-color: transparent;
}
.btn--ghost:hover:not(:disabled) { background: var(--lime-f); }
.btn--on-dark {
  background: var(--lime);
  color: var(--navy);
  border-color: var(--lime);
}
.btn--on-dark:hover:not(:disabled) { background: #f7a35f; border-color: #f7a35f; }
.btn--sm { padding: 7px 12px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--lg { padding: 14px 24px; font-size: var(--text-lg); }

/* ---------- card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Resolve signature: "prepared by Belong" — a warm apricot highlight (faint fill +
   tinted border), no edge stripe. Same vocabulary as .skill--key. */
.resolve { background: var(--apricot-wash); border-color: var(--apricot-border); }

/* ---------- chips / labels ---------- */
.chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-muted);
}

/* ---------- form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-muted);
}
.input {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--lime-f);
}