/* ============================================================
   MILENA AUTO PARTS — typography.css
   Fuente única: Inter (local, sin dependencia de Google Fonts)
   Jerarquía visual moderna para admin y cliente.
   ============================================================ */

/* ── @font-face ─────────────────────────────────────────────
   Usamos los tres tamaños ópticos disponibles:
     18pt → texto pequeño / UI (≤ 14px)
     24pt → texto de cuerpo (15–20px)
     28pt → títulos y display (≥ 21px)
   El navegador elige automáticamente con font-size-adjust,
   pero declaramos todos bajo el mismo nombre 'Inter' para
   que font-family: 'Inter' funcione en cualquier tamaño.
   ──────────────────────────────────────────────────────────── */

/* 18pt — Thin 100 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
/* 18pt — ExtraLight 200 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
/* 18pt — Light 300 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
/* 18pt — Regular 400 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
/* 18pt — Medium 500 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
/* 18pt — SemiBold 600 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
/* 24pt — Bold 700 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_24pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_24pt-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
/* 28pt — ExtraBold 800 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_28pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_28pt-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
/* 28pt — Black 900 */
@font-face { font-family: 'Inter'; src: url('../font/Inter_28pt-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter_28pt-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }


/* ── Variables tipográficas globales ────────────────────────
   Disponibles en todo el proyecto vía var(--font-*).
   ──────────────────────────────────────────────────────────── */
:root {
  --font-base:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Escala tipográfica (modular scale 1.25) */
  --text-xs:   0.72rem;   /* 11.5px — labels, badges, meta */
  --text-sm:   0.82rem;   /* 13px   — captions, subtítulos pequeños */
  --text-base: 0.9rem;    /* 14.4px — cuerpo de texto */
  --text-md:   1rem;      /* 16px   — texto destacado */
  --text-lg:   1.125rem;  /* 18px   — subtítulos de sección */
  --text-xl:   1.35rem;   /* 21.6px — títulos de tarjeta */
  --text-2xl:  1.65rem;   /* 26.4px — títulos de página */
  --text-3xl:  2rem;      /* 32px   — display / hero */
  --text-4xl:  2.5rem;    /* 40px   — display grande */

  /* Pesos semánticos */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Interlineado */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Tracking */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;
}


/* ── Reset tipográfico global ───────────────────────────────
   Aplica Inter a absolutamente todo el documento.
   ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  font-family: var(--font-base);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-base);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: #111827;
}


/* ── Jerarquía de títulos ───────────────────────────────────
   Aplica a h1–h6 en todo el proyecto.
   ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #111827;
  margin: 0;
}

/* H1 — Título de página principal */
h1 {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.04em;
}

/* H2 — Título de sección / tarjeta */
h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

/* H3 — Subtítulo de tarjeta / card */
h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

/* H4 — Etiqueta de grupo */
h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* H5 — Modal title / label destacado */
h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* H6 — Micro-título */
h6 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #6b7280;
}

/* Párrafos */
p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: #374151;
  margin: 0;
}

/* Texto pequeño */
small, .text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Labels de formulario */
label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #374151;
}

/* Inputs y selects */
input, select, textarea, button {
  font-family: var(--font-base);
  font-size: var(--text-base);
}

/* Código / monoespaciado */
code, pre, .font-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Énfasis tipográfico */
strong, b { font-weight: var(--weight-semibold); }
em        { font-style: italic; }


/* ── Clases utilitarias de tipografía ───────────────────────
   Disponibles en cualquier template.
   ──────────────────────────────────────────────────────────── */

/* Tamaños */
.text-xs   { font-size: var(--text-xs)  !important; }
.text-sm   { font-size: var(--text-sm)  !important; }
.text-base { font-size: var(--text-base)!important; }
.text-md   { font-size: var(--text-md)  !important; }
.text-lg   { font-size: var(--text-lg)  !important; }
.text-xl   { font-size: var(--text-xl)  !important; }
.text-2xl  { font-size: var(--text-2xl) !important; }
.text-3xl  { font-size: var(--text-3xl) !important; }

/* Pesos */
.font-regular   { font-weight: var(--weight-regular)   !important; }
.font-medium    { font-weight: var(--weight-medium)    !important; }
.font-semibold  { font-weight: var(--weight-semibold)  !important; }
.font-bold      { font-weight: var(--weight-bold)      !important; }
.font-extrabold { font-weight: var(--weight-extrabold) !important; }

/* Colores semánticos */
.text-primary   { color: #111827 !important; }
.text-secondary { color: #6b7280 !important; }
.text-muted     { color: #9ca3af !important; }
.text-brand     { color: #FB6265 !important; }

/* Tracking */
.tracking-tight   { letter-spacing: var(--tracking-tight)   !important; }
.tracking-wide    { letter-spacing: var(--tracking-wide)    !important; }
.tracking-wider   { letter-spacing: var(--tracking-wider)   !important; }
.tracking-widest  { letter-spacing: var(--tracking-widest)  !important; }
.uppercase        { text-transform: uppercase !important; }