/* ============================================================
 * butik-display.css — Fase 6.2 typography-token-coverage
 *
 * BEM-klasser til butik-display.js render-templates. Ekstraherer
 * font-family-deklarationer fra JS inline-styles til design-tokens
 * (--hd-font-fantasy + --hd-font-parchment), så fonts kan styres
 * centralt og inline-styles på font-niveau elimineres.
 *
 * Øvrige inline-styles (layout, static colors, dimensions) bevares i JS.
 * Rarity-colors flyttes til component-scopede custom properties i Fase 6.8.11.
 * ============================================================ */

@layer components {
  /* Empty-state placeholder ("Ingen butik valgt") */
  .butik-display__empty-text {
    font-family: var(--hd-font-fantasy);
    font-size: var(--hd-text-h3);
    line-height: var(--hd-leading-tight);
  }

  /* Shop header title (h1, shop name) */
  .butik-display__title {
    font-family: var(--hd-font-fantasy);
    font-size: clamp(var(--hd-text-h2), 4vw, var(--hd-text-display));
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__type {
    font-size: clamp(var(--hd-text-body), 2vw, var(--hd-text-h4));
    line-height: var(--hd-leading-snug);
  }

  .butik-display__empty-items {
    font-size: var(--hd-text-h4);
    line-height: var(--hd-leading-snug);
  }

  .butik-display__item-icon--large {
    font-size: var(--hd-text-display);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__item-icon--small {
    font-size: var(--hd-text-h1);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__rarity-badge {
    background: color-mix(in srgb, var(--bd-rarity-color, var(--hd-text-tertiary)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--bd-rarity-color, var(--hd-text-tertiary)) 27%, transparent);
    border-radius: 3px;
    color: var(--bd-rarity-color, var(--hd-text-tertiary));
    font-size: var(--hd-text-caption);
    line-height: var(--hd-leading-snug);
    padding: 2px 6px;
  }

  .butik-display__item-name {
    font-size: clamp(var(--hd-text-body-small), 1.2vw, var(--hd-text-body));
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__item-price {
    color: var(--hd-accent-warning);
    font-size: clamp(var(--hd-text-body), 1.3vw, var(--hd-text-h4));
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__item-price.is-price-hidden {
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  .butik-display__item-attunement {
    color: var(--hd-accent-secondary);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-snug);
    margin-bottom: 6px;
  }

  .butik-display__item-qty,
  .butik-display__sold-label,
  .butik-display__parchment-meta,
  .butik-display__parchment-props {
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-snug);
  }

  .butik-display__sold-item,
  .butik-display__parchment-description,
  .butik-display__parchment-label {
    font-size: var(--hd-text-ui);
    line-height: var(--hd-leading-normal);
  }

  /* Focus-overlay item title (h2, full-screen modal) */
  .butik-display__item-title {
    font-family: var(--hd-font-fantasy);
    font-size: clamp(var(--hd-text-h2), 4vw, var(--hd-text-display));
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__focus-rarity {
    color: var(--bd-rarity-color, var(--hd-text-tertiary));
    font-size: clamp(var(--hd-text-body), 2vw, var(--hd-text-h3));
    line-height: var(--hd-leading-snug);
    margin-bottom: 12px;
  }

  .butik-display__focus-price {
    color: var(--hd-accent-warning);
    font-size: clamp(var(--hd-text-h3), 3vw, var(--hd-text-h1));
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__focus-price.is-price-hidden {
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  .butik-display__focus-qty {
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-snug);
  }

  /* Statblock parchment container (Libre Baskerville body) */
  .butik-display__parchment-container {
    font-family: var(--hd-font-parchment);
  }

  /* Statblock h2 title (Cinzel primary; fallback follows --hd-font-fantasy cascade) */
  .butik-display__parchment-item-title {
    font-family: var(--hd-font-fantasy);
    font-size: clamp(var(--hd-text-h4), 3vw, var(--hd-text-h2));
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .butik-display__parchment-type {
    font-size: clamp(var(--hd-text-body-small), 1.5vw, var(--hd-text-ui));
    line-height: var(--hd-leading-snug);
  }

  .butik-display__parchment-label,
  .butik-display__parchment-price,
  .butik-display__parchment-rarity {
    font-weight: var(--hd-weight-bold);
  }

  .butik-display__parchment-price {
    color: var(--hd-surface-1);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-snug);
  }

  .butik-display__parchment-price.is-price-hidden {
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  .butik-display__parchment-value,
  .butik-display__parchment-rarity {
    font-size: var(--hd-text-ui);
    line-height: var(--hd-leading-snug);
  }

  .butik-display__parchment-rarity {
    color: var(--bd-rarity-color, var(--hd-text-tertiary));
    text-shadow: 0 0 4px color-mix(in srgb, var(--bd-rarity-color, var(--hd-text-tertiary)) 27%, transparent);
  }

  .butik-display__parchment-description {
    line-height: var(--hd-leading-relaxed);
  }
}