/* ============================================================
   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.
   ============================================================ */

/* ---- Font utilities ------------------------------------------
   The compiled tailwind.css hard-codes these families and loads after
   tokens/typography.css, so it would pin every .font-display heading to
   Cinzel whatever the theme says. Re-assert them from the tokens. */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* ---- Buttons ------------------------------------------------ */
.lc-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--btn-font, var(--font-body)); font-weight: var(--btn-weight, var(--fw-semibold));
  font-size: var(--btn-size, 0.875rem); letter-spacing: var(--btn-tracking, 0.01em); line-height: 1;
  text-transform: var(--btn-case, inherit);
  padding: 0.7rem 1.4rem; border-radius: var(--radius-btn);
  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-btn-hover), var(--bevel); }
  .lc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
  .lc-btn-sm { padding: 0.5rem 0.9rem; font-size: var(--btn-size-sm, 0.8125rem); }
  .lc-btn-lg { padding: 0.95rem 1.9rem; font-size: var(--btn-size-lg, 1rem); }
  /* Sentence-case body face whatever the theme's button face: for compliance
     links such as the free postal entry. */
  .lc-btn-plain { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-sm, 0.875rem); letter-spacing: 0.01em; text-transform: none; }

  .lc-btn-primary   { background: var(--accent-action); color: var(--text-on-action); border-color: var(--accent-action-hover); box-shadow: var(--shadow-btn), var(--bevel); }
  .lc-btn-gold      { background: var(--accent-gold); color: var(--text-on-gold); border-color: var(--accent-gold-strong); box-shadow: var(--shadow-btn), var(--bevel); }
  .lc-btn-secondary { background: var(--surface-card); 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(--surface-dark-card); color: var(--text-on-dark); border-color: var(--border-dark); box-shadow: var(--shadow-btn), var(--bevel); }

/* ---- Cards -------------------------------------------------- */
.lc-card {
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  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-card-hover); 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(--accent-action); }
.lc-accent-gold    { border-top: var(--accent-bar) solid var(--accent-gold); }
.lc-accent-arcane  { border-top: var(--accent-bar) solid var(--status-arcane); }

/* ---- Badges / status --------------------------------------- */
.lc-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.625rem; border-radius: var(--radius-badge);
  font-size: var(--badge-size, 0.6875rem); font-weight: var(--fw-bold);
  letter-spacing: var(--badge-tracking, 0.08em); text-transform: uppercase; line-height: 1.3;
  border: 1px solid transparent; white-space: nowrap;
}
.lc-badge-gold    { background: var(--accent-gold-fill); color: var(--accent-gold-ink); border-color: var(--accent-gold-border); }
.lc-badge-crimson { background: var(--accent-action-fill); color: var(--accent-action-ink); border-color: var(--accent-action-border); }
.lc-badge-success { background: var(--status-success-fill); color: var(--status-success-ink); border-color: var(--status-success-border); }
.lc-badge-warning { background: var(--status-warning-fill); color: var(--status-warning-ink); border-color: var(--status-warning-border); }
.lc-badge-arcane  { background: var(--status-arcane-fill); color: var(--status-arcane-ink); border-color: var(--status-arcane-border); }
.lc-badge-neutral { background: var(--surface-sunken); color: var(--text-body); border-color: var(--border-strong); }
.lc-badge-legendary { background: var(--accent-gold-fill); color: var(--accent-gold-ink-strong); border-color: var(--accent-gold-glow-border); box-shadow: var(--glow-legendary); }
.lc-badge-founding  { background: var(--surface-page); color: var(--accent-gold-ink-strong); border-color: var(--accent-gold); }

/* ---- 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(--surface-card); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input); 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(--focus-ring); 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(--surface-sunken); border: 1px solid var(--border-soft); border-radius: var(--radius-chip); overflow: hidden; }
.lc-progress > span { display: block; height: 100%; border-radius: var(--radius-chip); background: linear-gradient(90deg, var(--accent-action) 0%, var(--accent-gold) 130%); transition: width var(--dur-slow) var(--ease-out); }
.lc-progress-dark { background: var(--border-dark); border-color: var(--border-dark-strong); }

/* ---- Helpers ----------------------------------------------- */
.lc-eyebrow { font-family: var(--font-label); font-size: var(--label-size, var(--text-2xs, 0.6875rem)); font-weight: var(--label-weight, var(--fw-semibold)); letter-spacing: var(--label-tracking, 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(--accent-gold), transparent); }