:root {
  /* Display / Hero */
  --font-display-hero-size: var(--font-8xl);
  --font-display-hero-line-height: var(--font-9xl);
  --font-display-hero-letter-spacing: 0;

  /* Display / Page */
  --font-display-page-size: var(--font-6xl);
  --font-display-page-line-height: var(--font-7xl);
  --font-display-page-letter-spacing: 0;

  /* Display / Section */
  --font-display-section-size: var(--font-5xl);
  --font-display-section-line-height: var(--font-6xl);
  --font-display-section-letter-spacing: 0;

  /* Display / Price */
  --font-display-price-size: var(--font-4xl);
  --font-display-price-line-height: var(--font-5xl);
  --font-display-price-letter-spacing: 0;

  /* Title / Block */
  --font-title-block-size: var(--font-2xl);
  --font-title-block-line-height: var(--font-4xl);
  --font-title-block-letter-spacing: 0;

  /* Title / Card */
  --font-title-card-size: var(--font-xl);
  --font-title-card-line-height: var(--font-3xl);
  --font-title-card-letter-spacing: 0;

  /* Title / Step */
  --font-title-step-size: var(--font-lg);
  --font-title-step-line-height: var(--font-2xl);
  --font-title-step-letter-spacing: 0;

  /* Title / Notice */
  --font-title-notice-size: var(--font-sm);
  --font-title-notice-line-height: var(--font-xl);
  --font-title-notice-letter-spacing: 0;

  /* Body / Lead */
  --font-body-lead-size: var(--font-lg);
  --font-body-lead-line-height: var(--font-2xl);
  --font-body-lead-letter-spacing: 0;

  /* Body / Default */
  --font-body-default-size: var(--font-md);
  --font-body-default-line-height: var(--font-2xl);
  --font-body-default-letter-spacing: 0;

  /* Body / Support */
  --font-body-support-size: var(--font-sm);
  --font-body-support-line-height: var(--font-xl);
  --font-body-support-letter-spacing: 0;

  /* Body / Caption */
  --font-body-caption-size: var(--font-xs);
  --font-body-caption-line-height: var(--font-md);
  --font-body-caption-letter-spacing: 0;

  /* Action / Primary */
  --font-action-primary-size: var(--font-md);
  --font-action-primary-line-height: var(--font-2xl);
  --font-action-primary-letter-spacing: 0;

  /* Action / Secondary */
  --font-action-secondary-size: var(--font-sm);
  --font-action-secondary-line-height: var(--font-xl);
  --font-action-secondary-letter-spacing: 0;

  /* Action / Nav */
  --font-action-nav-size: var(--font-xs);
  --font-action-nav-line-height: var(--font-md);
  --font-action-nav-letter-spacing: 0;

  /* Action / Compact */
  --font-action-compact-size: var(--font-xs);
  --font-action-compact-line-height: var(--font-md);
  --font-action-compact-letter-spacing-13: 0;

  /* Field / Title */
  --font-field-title-size: var(--font-xs);
  --font-field-title-line-height: var(--font-md);
  --font-field-title-letter-spacing: 0;

  /* Field / Value */
  --font-field-value-size: var(--font-md);
  --font-field-value-line-height: var(--font-2xl);
  --font-field-value-letter-spacing: 0;

  /* Field / Label */
  --font-field-label-size: var(--font-sm);
  --font-field-label-line-height: var(--font-xl);
  --font-field-label-letter-spacing: 0;

  /* Field / Detail */
  --font-field-detail-size: var(--font-xs);
  --font-field-detail-line-height: var(--font-md);
  --font-field-detail-letter-spacing: 0;
}

/* Family tokens — re-evaluados en contexto de marca */
:root,
[data-brand] {
  /* Display → font-display-family */
  --font-display-hero-family: var(--font-display-family);
  --font-display-page-family: var(--font-display-family);
  --font-display-section-family: var(--font-display-family);
  --font-display-price-family: var(--font-display-family);

  /* Title → font-display-family */
  --font-title-block-family: var(--font-display-family);
  --font-title-card-family: var(--font-display-family);
  --font-title-step-family: var(--font-display-family);
  --font-title-notice-family: var(--font-body-family);

  /* Body → font-body-family */
  --font-body-lead-family: var(--font-body-family);
  --font-body-default-family: var(--font-body-family);
  --font-body-support-family: var(--font-body-family);
  --font-body-caption-family: var(--font-body-family);

  /* Action → font-body-family */
  --font-action-primary-family: var(--font-body-family);
  --font-action-secondary-family: var(--font-body-family);
  --font-action-nav-family: var(--font-body-family);
  --font-action-compact-family: var(--font-body-family);

  /* Field → font-body-family */
  --font-field-title-family: var(--font-body-family);
  --font-field-value-family: var(--font-body-family);
  --font-field-label-family: var(--font-body-family);
  --font-field-detail-family: var(--font-body-family);
}

@media (max-width: 768px) {
  :root {
    --font-display-hero-size: var(--font-6xl);
    --font-display-hero-line-height: var(--font-7xl);

    --font-display-page-size: var(--font-4xl);
    --font-display-page-line-height: var(--font-5xl);

    --font-display-section-size: var(--font-4xl);
    --font-display-section-line-height: var(--font-5xl);

    --font-display-price-size: var(--font-2xl);
    --font-display-price-line-height: var(--font-3xl);

    --font-title-block-size: var(--font-xl);
    --font-title-block-line-height: var(--font-2xl);

    --font-title-card-size: var(--font-lg);
    --font-title-card-line-height: var(--font-2xl);

    --font-title-step-size: var(--font-md);

    --font-body-lead-size: var(--font-md);
  }
}