/* =============================================================================
   BASE COMPONENTS — Button, Card, Text, Input.
   -----------------------------------------------------------------------------
   The shared building blocks for ALL new UI. Each consumes only semantic
   tokens (semantic.css) — no raw values, no --p-* primitives.

   Use these instead of hand-rolling one-off styles. The legacy screen classes
   in app.css (.btn-primary, .form-card, .field input, …) predate this file and
   are being migrated onto these primitives over time; when you touch a screen,
   prefer the base component.

   BRAND (TrueUp / Stiles): square corners, one crimson accent, slate outlines,
   uppercase 600 / 0.08em buttons, hairline-bordered cards on Paper.

   Markup conventions (BEM-ish):
     <button class="btn btn--primary">Save</button>
     <button class="btn btn--secondary btn--sm">Cancel</button>
     <div class="card card--pad"> … </div>
     <p class="text text--muted text--sm"> … </p>
     <input class="input" />            <label class="label">Field</label>
   ========================================================================== */

/* ── Button ────────────────────────────────────────────────────────────────
   Uppercase, weight 600, letter-spacing 0.08em, square corners. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-8);
  line-height: 1;
  padding: var(--space-16) var(--space-32);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { background: var(--color-border); color: var(--color-text-on-accent); border-color: transparent; cursor: not-allowed; }

/* Primary — solid crimson. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }

/* Secondary — slate outline that fills on hover. */
.btn--secondary {
  background: transparent;
  color: var(--color-slate-text);
  border-color: var(--color-slate-border);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--color-surface-dark);
  color: var(--color-text-on-accent);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-text-on-accent);
}
.btn--danger:hover:not(:disabled) { background: var(--color-danger-strong); }

/* sizes */
.btn--sm { font-size: var(--text-12); letter-spacing: var(--tracking-6); padding: var(--space-8) var(--space-16); }
.btn--lg { font-size: var(--text-15); padding: var(--space-16) var(--space-40); }

/* ── Card ────────────────────────────────────────────────────────────────
   White surface, 1px Mist hairline, no shadow, square corners. */
.card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-2xl);
}
.card--pad      { padding: var(--space-28); }
.card--pad-sm   { padding: var(--space-20); }
.card--flat     { border-color: var(--color-border-subtle); }
.card--bordered { border: var(--border-thin) solid var(--color-border-subtle); }
.card--accent   { border-left: var(--border-bar) solid var(--color-accent); }

/* ── Text ────────────────────────────────────────────────────────────────── */
.text {
  font-family: var(--font-sans);
  font-size: var(--text-15);
  font-weight: var(--weight-light);
  line-height: 1.6;
  color: var(--color-text-primary);
}
/* sizes */
.text--xs { font-size: var(--text-12); }
.text--sm { font-size: var(--text-13); }
.text--lg { font-size: var(--text-18); }
.text--xl { font-size: var(--text-20); }
/* weight */
.text--medium   { font-weight: var(--weight-medium); }
.text--semibold { font-weight: var(--weight-semibold); }
.text--bold     { font-weight: var(--weight-semibold); }
/* serif display — Baskerville headings/titles */
.text--serif    { font-family: var(--font-serif); font-weight: var(--weight-regular); }
/* intent colors */
.text--heading   { color: var(--color-text-heading); }
.text--secondary { color: var(--color-text-secondary); }
.text--muted     { color: var(--color-text-muted); }
.text--subtle    { color: var(--color-text-subtle); }
.text--faint     { color: var(--color-text-faint); }
.text--accent    { color: var(--color-accent); }
.text--danger    { color: var(--color-danger); }
.text--success   { color: var(--color-success-text); }
/* eyebrow: the uppercase label pattern used across screens */
.text--eyebrow {
  font-size: var(--text-12);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-8);
  color: var(--color-text-muted);
}

/* ── Input ────────────────────────────────────────────────────────────────
   Paper fill, 1px Mist border, square corners, crimson focus border. */
.label {
  display: block;
  font-size: var(--text-12);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-15);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-14);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.input::placeholder { color: var(--color-text-placeholder); }
.input:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
  background: var(--color-surface);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input--sm { font-size: var(--text-13); padding: var(--space-6) var(--space-10); }