/* =====================================================================
   QUICK SOLUTIONS — components.css
   Reusable UI primitives built on colors_and_type.css tokens.
   ===================================================================== */

/* ---------- Buttons ---------- */
.qs-btn {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.02em; line-height: 1;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.qs-btn:active { transform: translateY(1px); }
.qs-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.qs-btn--primary { background: var(--ink-900); color: #F4ECDD; }
.qs-btn--primary:hover { background: var(--ink-800); }
.qs-btn--primary:active { background: var(--ink-950); }

.qs-btn--sea { background: var(--sea-600); color: #F4FaFC; }
.qs-btn--sea:hover { background: var(--sea-700); box-shadow: 0 8px 22px -10px rgba(24,104,131,0.55); }
.qs-btn--sea:active { background: var(--sea-800); }

.qs-btn--brass { background: var(--brass-500); color: var(--ink-950); }
.qs-btn--brass:hover { background: var(--brass-600); box-shadow: var(--shadow-brass); }
.qs-btn--brass:active { background: var(--brass-700); }

.qs-btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--border-strong); }
.qs-btn--ghost:hover { border-color: var(--ink-900); background: rgba(14,37,54,0.04); }

.qs-btn--link { background: transparent; color: var(--ink-900); padding: 8px 2px; border-radius: 0;
  border-bottom: 1.5px solid var(--sea-500); }
.qs-btn--link:hover { color: var(--sea-700); }

.qs-btn--lg { padding: 16px 30px; font-size: var(--text-base); }
.qs-btn--sm { padding: 9px 15px; font-size: var(--text-xs); }

/* ---------- Inputs ---------- */
.qs-field { display: flex; flex-direction: column; gap: 6px; }
.qs-field > label { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-subtle); }
.qs-input, .qs-textarea, .qs-select {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--fg);
  background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.qs-input::placeholder, .qs-textarea::placeholder { color: var(--stone-400); }
.qs-input:focus, .qs-textarea:focus, .qs-select:focus {
  outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---------- Badges / service tags ---------- */
.qs-badge {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
}
.qs-badge--brass { background: var(--brass-50); color: var(--brass-700); border: 1px solid var(--brass-200); }
.qs-badge--sea   { background: var(--sea-50);  color: var(--sea-700);  border: 1px solid var(--sea-200); }
.qs-badge--navy  { background: var(--ink-900); color: var(--brass-400); }
.qs-badge--teak  { background: #F0E4D2; color: var(--teak-700); border: 1px solid #DEC7A6; }

/* ---------- Card ---------- */
.qs-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.qs-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.qs-card__body { padding: var(--space-6); }

/* ---------- Rule / divider with brass tick ---------- */
.qs-rule { display: flex; align-items: center; gap: 12px; color: var(--fg-subtle); }
.qs-rule::before, .qs-rule::after { content: ""; height: 1px; background: var(--border); flex: 1; }