/* ==========================================================================
   FIRST PICK — Componenti base
   --------------------------------------------------------------------------
   I mattoni con cui verrà costruita la landing: bottoni, card, badge,
   stat, divider. Richiede tokens.css + base.css.
   Il motivo ricorrente del brand è il rombo/cristallo (◆) del logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8em 1.9em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

/* Primario: oro pieno, testo navy — la CTA della landing */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  background: var(--color-accent-bright);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

/* Ghost: filo dorato, per azioni secondarie */
.btn--ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-accent-bright);
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-veil);
  box-shadow: var(--glow-gold);
}

/* Pressione: DOPO le varianti, così vince sui transform degli hover */
.btn:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------
   Superficie con filo dorato, come il bordo delle carte del logo.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--space-6);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.card:hover {
  border-color: var(--color-border-strong);
}

/* Variante "arcana": bagliore di cristallo, per l'elemento da esaltare */
.card--arcane {
  border-color: var(--color-arcane-border);
  box-shadow: var(--shadow-card), var(--glow-crystal);
}

.card > h3 {
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35em 0.9em;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-accent-veil);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-bright);
}

.badge--arcane {
  border-color: var(--color-arcane-border);
  background: var(--color-arcane-veil);
  color: var(--color-arcane-text);
}

/* --------------------------------------------------------------------------
   Stat — numeri del ranking (ELO, giocatori, negozi, stagioni…)
   -------------------------------------------------------------------------- */

.stat {
  display: grid;
  gap: var(--space-1);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-heading);
  font-variant-numeric: lining-nums tabular-nums;
}

.stat__value--gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Divider con gemma — il rombo del logo come ornamento di sezione
   -------------------------------------------------------------------------- */

.divider-gem {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 0;
  margin-block: var(--space-7);
  color: var(--color-arcane);
}

.divider-gem::before,
.divider-gem::after {
  content: "";
  flex: 1;
  height: var(--border-width);
  background: linear-gradient(90deg, transparent, var(--color-border-strong));
}

.divider-gem::after {
  background: linear-gradient(90deg, var(--color-border-strong), transparent);
}

/* La gemma: rombo ruotato con gradiente cristallo */
.divider-gem__stone {
  width: 0.6rem;
  height: 0.6rem;
  rotate: 45deg;
  background: var(--gradient-crystal);
  box-shadow: var(--glow-crystal);
}

/* --------------------------------------------------------------------------
   Lista con marker a rombo
   --------------------------------------------------------------------------
   Nota: con list-style: none Safari/VoiceOver smette di annunciare la
   lista — nel markup aggiungere role="list" alla <ul class="list-gem">.
   -------------------------------------------------------------------------- */

.list-gem {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.list-gem > li {
  position: relative;
  padding-inline-start: var(--space-5);
}

.list-gem > li::before {
  content: "◆" / ""; /* alt vuoto: gli screen reader non leggono il rombo */
  position: absolute;
  inset-inline-start: 0;
  top: 0.1em;
  font-size: 0.7em;
  color: var(--color-accent);
}