/*
 * Webiiarte · plantilla tipográfica común para todas las pieles
 *
 * Este archivo define proporciones y roles, no la personalidad visual.
 * Cada piel puede elegir familia, peso, tracking y tratamiento gráfico,
 * pero debe consumir estos tokens para conservar la misma jerarquía.
 */

:root {
  --wia-type-display: 60px;
  --wia-type-h1: 48px;
  --wia-type-h2: 38px;
  --wia-type-h3: 24px;
  --wia-type-panel-title: 18px;
  --wia-type-body-lg: 18px;
  --wia-type-body: 16px;
  --wia-type-body-sm: 14px;
  --wia-type-meta: 12px;
  --wia-type-label: 11px;
  --wia-type-button: 13px;
  --wia-type-topnav: 12.5px;
  --wia-type-brand: 14px;

  --wia-line-display: .92;
  --wia-line-heading: 1.05;
  --wia-line-body: 1.55;

  --wia-control-nav: 38px;
  --wia-icon-nav: 18px;
  --wia-control-media: 56px;
  --wia-icon-media: 24px;
  --wia-icon-emphasis: 28px;
  --wia-icon-action: 24px;
}

@media (max-width: 1023px) {
  :root {
    --wia-type-display: 52px;
    --wia-type-h1: 40px;
    --wia-type-h2: 34px;
    --wia-type-h3: 22px;
    --wia-type-panel-title: 18px;
    --wia-type-body-lg: 17px;
    --wia-type-body: 16px;
    --wia-type-body-sm: 14px;
    --wia-type-meta: 12px;
    --wia-type-label: 10px;
    --wia-type-button: 12px;
    --wia-type-topnav: 12px;
    --wia-type-brand: 13px;

    --wia-control-nav: 34px;
    --wia-icon-nav: 17px;
    --wia-control-media: 52px;
    --wia-icon-media: 22px;
    --wia-icon-emphasis: 26px;
    --wia-icon-action: 23px;
  }
}

@media (max-width: 599px) {
  :root {
    --wia-type-display: 42px;
    --wia-type-h1: 32px;
    --wia-type-h2: 28px;
    --wia-type-h3: 20px;
    --wia-type-panel-title: 17px;
    --wia-type-body-lg: 16px;
    --wia-type-body: 15px;
    --wia-type-body-sm: 13px;
    --wia-type-meta: 11px;
    --wia-type-label: 10px;
    --wia-type-button: 12px;
    --wia-type-topnav: 11px;
    --wia-type-brand: 11px;

    --wia-control-nav: 32px;
    --wia-icon-nav: 16px;
    --wia-control-media: 48px;
    --wia-icon-media: 20px;
    --wia-icon-emphasis: 24px;
    --wia-icon-action: 22px;
  }
}

/* Clases optativas para prototipos nuevos. Las pieles existentes pueden
 * mapear sus selectores directamente a los tokens anteriores. */
.wia-type-display { font-size: var(--wia-type-display); line-height: var(--wia-line-display); }
.wia-type-h1 { font-size: var(--wia-type-h1); line-height: var(--wia-line-heading); }
.wia-type-h2 { font-size: var(--wia-type-h2); line-height: var(--wia-line-heading); }
.wia-type-h3 { font-size: var(--wia-type-h3); line-height: var(--wia-line-heading); }
.wia-type-panel-title { font-size: var(--wia-type-panel-title); line-height: var(--wia-line-heading); }
.wia-type-body-lg { font-size: var(--wia-type-body-lg); line-height: var(--wia-line-body); }
.wia-type-body { font-size: var(--wia-type-body); line-height: var(--wia-line-body); }
.wia-type-body-sm { font-size: var(--wia-type-body-sm); line-height: var(--wia-line-body); }
.wia-type-meta { font-size: var(--wia-type-meta); }
.wia-type-label { font-size: var(--wia-type-label); line-height: 1; }
.wia-type-button { font-size: var(--wia-type-button); line-height: 1; }
.wia-type-topnav { font-size: var(--wia-type-topnav); line-height: 1; }