/* ============================================================
   LA CALAIXERA — Component primitives
   Depends on colors_and_type.css tokens.
   Lightweight, Bootstrap-compatible class names where sensible.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease, border-color .14s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn:active { transform: scale(0.985); }

.btn-primary { background: var(--clay); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--clay-deep); }
.btn-primary:active { background: var(--clay-press); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--paper-1); border-color: var(--line-strong); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }

.btn-approve { background: var(--oliva); color: #fff; }
.btn-approve:hover { background: var(--oliva-deep); }

.btn-danger { background: transparent; color: var(--alarm-deep); border-color: color-mix(in oklab, var(--alarm) 40%, transparent); }
.btn-danger:hover { background: var(--alarm-tint); }

.btn-sm { padding: 7px 12px; font-size: var(--text-sm); }
.btn-lg { padding: 13px 22px; font-size: var(--text-md); }
.btn:disabled, .btn[disabled] { color: var(--ink-4); background: var(--paper-1); border-color: var(--line); box-shadow: none; cursor: not-allowed; }

/* ---------- Status badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-draft     { color: var(--state-draft-fg);     background: var(--state-draft-bg); }
.badge-review    { color: var(--state-review-fg);    background: var(--state-review-bg); }
.badge-client    { color: var(--state-client-fg);    background: var(--state-client-bg); }
.badge-approved  { color: var(--state-approved-fg);  background: var(--state-approved-bg); }
.badge-published { color: var(--state-published-fg); background: var(--state-published-bg); }
.badge-broken    { color: var(--state-broken-fg);    background: var(--state-broken-bg); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.input, .textarea, .select {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 10px 12px; width: 100%;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---------- Card (paper sheet) ---------- */
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.sheet-cream { background: var(--paper-1); }

/* ---------- Approval stamp ---------- */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 10px 18px;
  border: 2.5px solid var(--oliva); border-radius: var(--r-sm);
  color: var(--oliva-deep); transform: rotate(-6deg);
  font-family: var(--font-mono); text-transform: uppercase;
  background: color-mix(in oklab, var(--oliva-tint) 55%, transparent);
}
.stamp .stamp-top { font-size: 14px; font-weight: 700; letter-spacing: 0.18em; line-height: 1; }
.stamp .stamp-sub { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }

/* ---------- Avatar ---------- */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #fff; letter-spacing: 0.02em;
}