/* ============================================================
Lau Hipp — Design Tokens
Sistema de marca v1.0 · Mayo 2026
============================================================ */
:root {
/* ---------- COLORES ---------- */
/* Core */
--lh-tinta: #4A3D5C; /* Texto principal · uso acotado */
--lh-violeta: #6B5CB8; /* Color de marca · botones · acento principal */
--lh-rosa: #D4607E; /* Acento secundario · stats · highlight */
--lh-suave: #EDE6FA; /* Fondo hero · violeta suave */
--lh-crema: #F5EFE6; /* Fondo cálido · "Sobre Lau" */
--lh-marfil: #FBF8F5; /* Fondo principal · cards · documentos */
/* Escala violeta */
--lh-violeta-oscuro: #3D2E88;
--lh-violeta-marca: #6B5CB8; /* = --lh-violeta */
--lh-violeta-medio: #9A8ED4;
--lh-violeta-suave: #C8BFF0;
--lh-violeta-fondo: #EDE6FA; /* = --lh-suave */
/* Escala rosa */
--lh-rosa-oscuro: #A84860;
--lh-rosa-marca: #D4607E; /* = --lh-rosa */
--lh-rosa-medio: #E48BA1;
--lh-rosa-suave: #F0BAC8;
--lh-rosa-fondo: #FBE7EE;
/* Utilitarios */
--lh-linea: rgba(74, 61, 92, 0.12);
--lh-linea-suave: rgba(74, 61, 92, 0.06);
--lh-overlay: rgba(74, 61, 92, 0.04);
/* Estado / semánticos */
--lh-ok: #4A8C5E;
--lh-error: #A84860; /* = --lh-rosa-oscuro */
/* ---------- TIPOGRAFÍA ---------- */
--lh-font-sans: 'Onest', system-ui, -apple-system, sans-serif;
--lh-font-mono: 'Geist Mono', ui-monospace, monospace;
/* Pesos */
--lh-weight-light: 300;
--lh-weight-regular: 400;
--lh-weight-medium: 500;
--lh-weight-semibold: 600;
--lh-weight-bold: 700;
/* Escala tipográfica (px) */
--lh-text-mono: 11px; /* eyebrow, tags, nav */
--lh-text-xs: 12px;
--lh-text-sm: 14px;
--lh-text-base: 17px; /* cuerpo */
--lh-text-lg: 20px; /* h3 */
--lh-text-xl: 28px; /* quote / h2 menor */
--lh-text-2xl: 40px; /* h2 secciones */
--lh-text-3xl: 64px; /* display medio */
--lh-text-display: 132px; /* hero */
/* Line-heights */
--lh-lh-display: 0.92;
--lh-lh-title: 1.05;
--lh-lh-body: 1.6;
--lh-lh-mono: 1.4;
/* Letter-spacing */
--lh-tracking-display: -0.045em;
--lh-tracking-title: -0.03em;
--lh-tracking-body: 0;
--lh-tracking-mono: 0.14em;
--lh-tracking-eyebrow: 0.20em;
/* ---------- ESPACIADO (escala 4px) ---------- */
--lh-space-1: 4px;
--lh-space-2: 8px;
--lh-space-3: 12px;
--lh-space-4: 16px;
--lh-space-5: 24px;
--lh-space-6: 32px;
--lh-space-7: 48px;
--lh-space-8: 64px;
--lh-space-9: 96px;
--lh-space-10: 128px;
/* Padding sección estándar */
--lh-section-py: 96px;
--lh-section-px: 64px;
/* ---------- LAYOUT ---------- */
--lh-container: 1100px;
--lh-container-narrow: 720px;
--lh-container-wide: 1280px;
/* ---------- BORDES Y RADIOS ---------- */
--lh-radius-none: 0; /* default — el sistema es plano */
--lh-radius-sm: 4px; /* solo cuando es muy necesario */
--lh-radius-md: 8px;
--lh-border-thin: 1px solid var(--lh-linea);
--lh-border-accent: 3px solid var(--lh-violeta);
--lh-border-bottom-rosa: 6px solid var(--lh-rosa);
/* ---------- TRANSICIONES ---------- */
--lh-transition-fast: 0.15s ease;
--lh-transition-base: 0.2s ease;
--lh-transition-slow: 0.4s ease;
}
/* ============================================================
CLASES UTILITARIAS BASE (opcional — para usar tal cual en HTML)
============================================================ */
/* Texto */
.lh-eyebrow {
font-family: var(--lh-font-mono);
font-size: var(--lh-text-mono);
letter-spacing: var(--lh-tracking-eyebrow);
text-transform: uppercase;
color: var(--lh-violeta);
}
.lh-display {
font-family: var(--lh-font-sans);
font-weight: var(--lh-weight-medium);
font-size: clamp(64px, 9vw, var(--lh-text-display));
line-height: var(--lh-lh-display);
letter-spacing: var(--lh-tracking-display);
color: var(--lh-tinta);
}
.lh-display em {
font-style: normal;
color: var(--lh-rosa);
font-weight: var(--lh-weight-semibold);
}
.lh-h2 {
font-family: var(--lh-font-sans);
font-weight: var(--lh-weight-medium);
font-size: clamp(40px, 6vw, 80px);
line-height: var(--lh-lh-title);
letter-spacing: var(--lh-tracking-title);
color: var(--lh-tinta);
}
.lh-h2 em {
font-style: normal;
color: var(--lh-violeta);
font-weight: var(--lh-weight-semibold);
}
.lh-body {
font-family: var(--lh-font-sans);
font-size: var(--lh-text-base);
line-height: var(--lh-lh-body);
color: var(--lh-tinta);
}
.lh-mono {
font-family: var(--lh-font-mono);
font-size: var(--lh-text-mono);
letter-spacing: var(--lh-tracking-mono);
text-transform: uppercase;
}
/* Wordmark */
.lh-wordmark {
font-family: var(--lh-font-sans);
font-weight: var(--lh-weight-medium);
letter-spacing: -0.05em;
color: var(--lh-tinta);
}
.lh-wordmark .h {
color: var(--lh-rosa);
font-weight: var(--lh-weight-semibold);
}
/* Botones */
.lh-btn {
display: inline-flex;
align-items: center;
gap: var(--lh-space-2);
font-family: var(--lh-font-sans);
font-size: var(--lh-text-sm);
font-weight: var(--lh-weight-medium);
padding: 14px 24px;
border: none;
cursor: pointer;
transition: background var(--lh-transition-base), color var(--lh-transition-base);
}
.lh-btn--primary {
background: var(--lh-violeta);
color: var(--lh-marfil);
}
.lh-btn--primary:hover { background: var(--lh-violeta-oscuro); }
.lh-btn--ghost {
background: transparent;
color: var(--lh-tinta);
border: 1px solid var(--lh-linea);
}
.lh-btn--ghost:hover {
border-color: var(--lh-violeta);
color: var(--lh-violeta);
}
/* ============================================================
REGLAS DE COMBINACIÓN (referencia rápida)
============================================================
Web hero → fondo: suave · título: tinta · acento: violeta
Sobre Lau → fondo: crema · título: tinta · acento: violeta
Contacto/footer → fondo: violeta · título: marfil · acento: rosa
Banner LinkedIn → fondo: suave · título: tinta · acento: rosa
Tapa documento → fondo: marfil · título: tinta · acento: violeta
============================================================ */
/* ============================================================
IMPORT DE FUENTES (agregar al )
============================================================
============================================================ */