/*
 * CareerPool canonical component classes.
 *
 * Every rule here reads only from tokens.css variables — no hardcoded
 * color/radius/size values. Load tokens.css before this file. See
 * /opt/careerpool/CLAUDE.md before adding to or bypassing this file.
 */

/* ---- Buttons: exactly two everyday variants (primary/secondary) plus
   one deliberate exception (danger, destructive actions only — see
   Stage 4 brief, /status cancel/restore flows). Do not add a fourth. ---- */

.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--radius-btn);
  border: none;
  font-family: var(--font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease, background-color .15s ease;
}
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover { opacity: .92; transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px) scale(.98); opacity: .85; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .5; cursor: default; transform: none; }

/* !important on `color` in all three variants below: on the 4 real
   Tilda pages (anketa/de/kandidaten/kandidat), Tilda's own generated
   `#allrecords a{color:#ff8562}` (an ID selector) beats a plain class
   like `.btn-primary` whenever the button element is an `<a>` (e.g.
   the anketa Telegram-connect link) -- without !important here the
   button text silently renders salmon-on-orange instead of the
   intended color. Confirmed live via computed-style inspection during
   the Stage 4 screenshot pass. Harmless on pages that don't load that
   rule and on <button> elements (the hijack only targets `a`). */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary) !important;
}
.btn-primary:hover { background: var(--color-primary-hover); opacity: 1; }

.btn-secondary {
  background: var(--color-secondary-bg);
  color: var(--color-secondary-text) !important;
}
.btn-secondary:hover { background: var(--color-secondary-bg-hover); opacity: 1; }

/* Destructive actions only (cancel subscription, revoke, etc). Not a
   third everyday choice alongside primary/secondary. */
.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text) !important;
  border: 1px solid var(--color-danger-border);
}
.btn-danger:hover { background: var(--color-danger-bg-hover); opacity: 1; }

/* ---- Typography ---- */

.hero-text {
  font-family: var(--font-family);
  font-size: var(--text-hero-size);
  font-weight: var(--text-hero-weight);
  color: var(--color-text-primary);
  margin: 0;
}
/* Default mobile shrink for every page using .hero-text, so this isn't
   something each new page has to remember to add locally (that's how
   /profile ended up without one -- a long real name, e.g. a Russian
   patronymic + double-barrelled surname, crowds the card's right edge
   at 375px with no size reduction at all). Same breakpoint/value the
   home page already used locally for this same class -- a page can
   still override with its own more specific rule (as /anketa's
   .cp-title already does at 768px) without conflict. */
@media (max-width: 640px) {
  .hero-text { font-size: 30px; }
}
.h1 {
  font-family: var(--font-family);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  color: var(--color-text-primary);
  margin: 0;
}
.h2 {
  font-family: var(--font-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  color: var(--color-text-primary);
  margin: 0;
}
.body-text {
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  color: var(--color-text-primary);
}
.body-text-secondary {
  font-family: var(--font-family);
  font-size: var(--text-body-secondary-size);
  font-weight: var(--text-body-secondary-weight);
  color: var(--color-text-muted);
}
.legal-text {
  font-family: var(--font-family);
  font-size: var(--text-legal-size);
  font-weight: var(--text-legal-weight);
  color: var(--color-text-muted);
}

/* ---- Badge: status pills (e.g. /kandidaten cards). Deliberately its
   own class, not the button class, so a badge never reads as
   clickable. ---- */
.badge {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--text-legal-size);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-btn);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-pending { background: var(--color-secondary-bg); color: var(--color-secondary-text); }