/* ============================================================================
 * DESIGN SYSTEM AUAS — TOKENS DE TIPOGRAFÍA
 * ----------------------------------------------------------------------------
 * Fuente de verdad: apps/static/assets/PHOSIS/css/style.css
 *                    apps/templates/includes/head.html (Google Fonts)
 *
 * REGLA: los tamaños provienen de los valores REALES más frecuentes del
 * template. No se introduce ninguna escala nueva.
 * ========================================================================= */

:root,
[data-bs-theme="light"],
[data-pc-preset="PHOSIS"],
[data-pc-preset="MINSAIT"],
[data-pc-preset="TECNIDRONES"] {

  /* ==========================================================================
   * 1. FAMILIAS
   * La app carga Open Sans desde Google Fonts en includes/head.html:10
   * y la declara en style.css:115 como --bs-font-sans-serif.
   * ========================================================================== */
  --ui-font-sans:    "Open Sans", sans-serif;
  --ui-font-mono:    var(--bs-font-monospace);

  /* ==========================================================================
   * 2. ESCALA DE TAMAÑOS
   * Frecuencia real medida en PHOSIS/style.css:
   *   14px (18 usos) = 0.875rem (14 usos)  ← tamaño base DOMINANTE
   *   12px (11), 0.765625rem (11)          ← equivalente Bootstrap $font-size-sm
   *   1.09375rem (10) = 17.5px             ← títulos de card
   *   18px (7), 20px (6), 24px (4), 16px (3)
   * ========================================================================== */
  --ui-text-2xs:    0.6875rem;   /* 11px */
  --ui-text-xs:     0.75rem;     /* 12px — control denso, badges */
  --ui-text-sm:     0.8125rem;   /* 13px */
  --ui-text-base:   0.875rem;    /* 14px — ★ TAMAÑO BASE DEL PRODUCTO */
  --ui-text-md:     1rem;        /* 16px — cuerpo de lectura */
  --ui-text-lg:     1.125rem;    /* 18px */
  --ui-text-xl:     1.25rem;     /* 20px */
  --ui-text-2xl:    1.5rem;      /* 24px — título de card */
  --ui-text-3xl:    2rem;        /* 32px */
  --ui-text-4xl:    3rem;        /* 48px — KPI / display */

  /* ==========================================================================
   * 3. PESOS
   * Open Sans se carga con 300;400;500;600 (head.html:10)
   * ========================================================================== */
  --ui-font-weight-light:      300;
  --ui-font-weight-regular:    400;
  --ui-font-weight-medium:     500;
  --ui-font-weight-semibold:  600;   /* ★ uso dominante en titles/buttons */
  --ui-font-weight-bold:       700;

  /* ==========================================================================
   * 4. INTERLINEADO
   * ========================================================================== */
  --ui-leading-tight:    1.25;
  --ui-leading-snug:     1.375;
  --ui-leading-normal:   1.5;
  --ui-leading-relaxed:  1.625;

  /* ==========================================================================
   * 5. LETRAS
   * ========================================================================== */
  --ui-tracking-normal:  0;
  --ui-tracking-wide:    0.025em;
  --ui-tracking-wider:   0.05em;   /* labels en mayúscula */
  --ui-tracking-tight:   -0.01em;

  /* ==========================================================================
   * 6. TRANSFORMAS DE TEXTO
   * ========================================================================== */
  --ui-transform-uppercase: uppercase;
  --ui-transform-capitalize: capitalize;
  --ui-transform-lowercase: lowercase;
}

/* ============================================================================
 * APLICACIÓN BASE
 * Aplica los tokens al body. Debe cargarse DESPUÉS de bootstrap.min.css y
 * de {COMPANY}/css/style.css para ganar la cascada.
 * ========================================================================= */
body {
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-normal);
  color: var(--ui-text);
}

/* Jerarquía tipográfica canónica.
 * Reemplaza los <h1>..<h6> con tamaños hardcodeados dispersos
 * (18px, 20px, 24px, 40px, 50px, 3rem…_medidos en PHOSIS/style.css). */
.ui-h1, h1.ui-h1 { font-size: var(--ui-text-3xl); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-leading-tight); letter-spacing: var(--ui-tracking-tight); }
.ui-h2, h2.ui-h2 { font-size: var(--ui-text-2xl); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-leading-tight); }
.ui-h3, h3.ui-h3 { font-size: var(--ui-text-xl);  font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-leading-snug); }
.ui-h4, h4.ui-h4 { font-size: var(--ui-text-lg);  font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-leading-snug); }
.ui-h5, h5.ui-h5 { font-size: var(--ui-text-md);  font-weight: var(--ui-font-weight-semibold); }
.ui-h6, h6.ui-h6 { font-size: var(--ui-text-base); font-weight: var(--ui-font-weight-semibold); text-transform: var(--ui-transform-uppercase); letter-spacing: var(--ui-tracking-wider); color: var(--ui-text-secondary); }

/* Texto de apoyo */
.ui-text-secondary { color: var(--ui-text-secondary) !important; }
.ui-text-muted     { color: var(--ui-text-muted) !important; }
.ui-text-xs        { font-size: var(--ui-text-xs) !important; }
.ui-text-sm        { font-size: var(--ui-text-sm) !important; }
.ui-text-lg        { font-size: var(--ui-text-lg) !important; }
.ui-text-medium    { font-weight: var(--ui-font-weight-medium) !important; }
.ui-text-semi      { font-weight: var(--ui-font-weight-semibold) !important; }
.ui-text-uppercase { text-transform: var(--ui-transform-uppercase); letter-spacing: var(--ui-tracking-wider); }