/* ============================================================
   Legion Comps — Tailwind component layer
   ------------------------------------------------------------
   Brand component classes for use in Django/HTML templates.
   All values come from tokens/colors.css etc. — load the design
   system's token CSS so the custom properties exist.
   These are plain, UNLAYERED CSS rules so they reliably override
   Tailwind's Preflight button reset.
   ============================================================ */

/* ---- Buttons ------------------------------------------------ */
.lc-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: 0.875rem; letter-spacing: 0.01em; line-height: 1;
  padding: 0.7rem 1.4rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
  .lc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .lc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
  .lc-btn-sm { padding: 0.5rem 0.9rem; font-size: 0.8125rem; }
  .lc-btn-lg { padding: 0.95rem 1.9rem; font-size: 1rem; }

  .lc-btn-primary   { background: var(--crimson-500); color: #fff; border-color: var(--crimson-600); box-shadow: var(--shadow-sm); }
  .lc-btn-gold      { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-600); box-shadow: var(--shadow-sm); }
  .lc-btn-secondary { background: var(--paper-0); color: var(--text-heading); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
  .lc-btn-ghost     { background: transparent; color: var(--text-secondary); }
  .lc-btn-dark      { background: var(--slate-800); color: var(--on-dark-hi); border-color: var(--slate-700); box-shadow: var(--shadow-sm); }

/* ---- Cards -------------------------------------------------- */
.lc-card {
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lc-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.lc-card-dark { background: var(--surface-dark-card); border-color: var(--border-dark); color: var(--text-on-dark-body); box-shadow: var(--shadow-dark); }
.lc-card-sunken { background: var(--surface-sunken); box-shadow: none; }
.lc-accent-crimson { border-top: var(--accent-bar) solid var(--crimson-500); }
.lc-accent-gold    { border-top: var(--accent-bar) solid var(--gold-500); }
.lc-accent-arcane  { border-top: var(--accent-bar) solid var(--arcane-500); }

/* ---- Badges / status --------------------------------------- */
.lc-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.625rem; border-radius: var(--radius-pill);
  font-size: 0.6875rem; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
  border: 1px solid transparent; white-space: nowrap;
}
.lc-badge-gold    { background: var(--gold-100); color: var(--gold-700); border-color: rgba(184,144,47,0.35); }
.lc-badge-crimson { background: var(--crimson-100); color: var(--crimson-700); border-color: rgba(200,35,59,0.30); }
.lc-badge-success { background: var(--success-tint); color: var(--success-700); border-color: rgba(47,158,99,0.30); }
.lc-badge-warning { background: var(--warning-tint); color: var(--warning-700); border-color: rgba(217,148,37,0.30); }
.lc-badge-arcane  { background: var(--arcane-tint); color: var(--arcane-700); border-color: rgba(106,91,194,0.30); }
.lc-badge-neutral { background: var(--paper-200); color: var(--ink-600); border-color: var(--border-strong); }

/* ---- Inputs ------------------------------------------------- */
.lc-input {
  width: 100%; font-family: var(--font-body); font-size: 0.9375rem;
  color: var(--text-heading); padding: 0.65rem 0.85rem;
  background: var(--paper-0); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md); outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lc-input:focus { border-color: var(--gold-600); box-shadow: var(--ring-gold); }
.lc-label {
  display: block; font-family: var(--font-body); font-size: var(--text-2xs, 0.6875rem);
  font-weight: var(--fw-semibold); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-gold-ink); margin-bottom: 0.4rem;
}

/* ---- Progress ---------------------------------------------- */
.lc-progress { width: 100%; height: 8px; background: var(--paper-200); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); overflow: hidden; }
.lc-progress > span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--crimson-500) 0%, var(--gold-500) 130%); transition: width var(--dur-slow) var(--ease-out); }
.lc-progress-dark { background: var(--slate-700); border-color: var(--slate-600); }

/* ---- Helpers ----------------------------------------------- */
.lc-eyebrow { font-family: var(--font-body); font-size: var(--text-2xs, 0.6875rem); font-weight: var(--fw-semibold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-action-ink); }
.lc-eyebrow-gold { color: var(--accent-gold-ink); }
.lc-panel-dark { background: var(--surface-dark); color: var(--text-on-dark-body); }
.lc-rule { width: 4.5rem; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); }