/* ============================================================ tokens.css — sistema de identidad VitalFit Fuente: VITALFIT_IDENTIDAD VISUAL — Branding Proposal (24 pp.) ÚNICO archivo del proyecto donde pueden existir valores literales de color y familia tipográfica. Cualquier otra hoja consume variables de aquí. Se carga SIEMPRE primero, antes que base.css. ============================================================ */ :root { /* ══════════════════════════════════════════════════════════ 1. PALETA LITERAL DEL MANUAL (p. 14) Los siete colores tal como los declara el PDF, con su nombre original. No se usan directamente en los componentes: se consumen a través de los roles semánticos del bloque 2. ══════════════════════════════════════════════════════════ */ --marca-kombu-green: #2D4336; /* KOMBU GREEN */ --marca-pale-silver: #C2CEAE; /* PALE SILVER */ --marca-old-lace: #F8F5E4; /* OLD LACE */ --marca-camel: #C2A46E; /* CAMEL */ --marca-green-ryb: #80B232; /* GREEN (RYB) */ --marca-blush: #E15D8B; /* BLUSH */ --marca-magenta: #973C59; /* QUINACRIDONE MAGENTA */ /* ══════════════════════════════════════════════════════════ 2. ROLES DE COLOR El manual declara la paleta pero no asigna roles: la asignación se deduce del logotipo (p. 10-13) y de las aplicaciones (p. 17-23). Los valores marcados [derivado] se calculan desde un color de la paleta y están registrados en BRAND_AUDIT.md. ══════════════════════════════════════════════════════════ */ /* ── Superficies ── */ --color-superficie: var(--marca-old-lace); --color-superficie-alta: #FAF9ED; /* [derivado] Old Lace + 35% blanco. La paleta no ofrece una segunda superficie clara y el sitio alterna dos. */ --color-superficie-suave: var(--marca-pale-silver); /* p. 17: postal sobre Pale Silver */ --color-superficie-inversa: var(--marca-kombu-green); /* p. 17-18: tarjeta de presentación */ --color-superficie-campo: #F9F7E9; /* [derivado] Old Lace + 18% blanco, para inputs */ --color-superficie-acento: var(--marca-magenta); /* p. 18 y 21: fondo y badges */ /* ── Texto ── */ --color-texto: var(--marca-kombu-green); /* 9.74:1 sobre superficie */ --color-texto-secundario: #435848; /* [derivado] 7.03:1 sobre superficie */ --color-texto-suave: #637561; /* [derivado] 4.51:1 sobre superficie */ --color-texto-inverso: var(--marca-old-lace); /* 9.74:1 sobre superficie inversa */ --color-texto-meta: #A4AB9C; /* [derivado] 4.51:1 sobre superficie inversa */ --color-texto-enfasis: var(--marca-magenta); /* 6.17:1 — p. 23, titular con énfasis */ --color-texto-enfasis-alt: var(--marca-pale-silver); /* 6.47:1 sobre inversa — p. 10, "Fit" del logotipo */ /* ── Acentos ── */ --color-acento: var(--marca-camel); --color-acento-texto: #C2A56F; /* [ajuste de contraste] Camel puro da 4.49:1 sobre inversa; +0.8% de luminosidad hacia Old Lace lo lleva a 4.53:1 conservando el tono */ --color-acento-oscuro: #747151; /* [derivado] Camel 53% hacia Kombu → 4.54:1 sobre superficie */ --color-vegetal: var(--marca-pale-silver); /* ── Estados (el manual no los define — ver BRAND_AUDIT.md) ── */ --color-exito: var(--marca-green-ryb); --color-error: var(--marca-magenta); --color-aviso: var(--marca-blush); /* ── Bordes, líneas y tramas ── */ --color-borde: #E0E3CC; /* [derivado] Old Lace 45% hacia Pale Silver */ --color-borde-suave: #D5DCC1; /* [derivado] Old Lace 65% hacia Pale Silver */ --color-franja: #DAE0C6; /* [derivado] Pale Silver 45% hacia Old Lace */ /* ── Transparencias recurrentes (derivadas de la paleta) ── */ --nav-fondo: rgba(248, 245, 228, 0.92); --nav-panel-fondo: rgba(248, 245, 228, 0.98); --nav-panel-linea: rgba(45, 67, 54, 0.06); --linea-tenue: rgba(45, 67, 54, 0.08); --linea-clara: rgba(248, 245, 228, 0.15); --velo-borde: rgba(248, 245, 228, 0.35); --velo-fondo: rgba(248, 245, 228, 0.12); --punto-inactivo: rgba(194, 206, 174, 0.35); --halo-foco: rgba(194, 206, 174, 0.45); --hueco-fondo: rgba(45, 67, 54, 0.05); --hueco-borde: rgba(45, 67, 54, 0.28); --hueco-texto: #465A4A; /* ── Sombras ── */ --nav-sombra: 0 1px 0 rgba(45, 67, 54, 0.08); --sombra-cta: 0 12px 28px rgba(45, 67, 54, 0.28); --sombra-tarjeta: 0 20px 44px rgba(45, 67, 54, 0.12); --sombra-wa: 0 14px 32px rgba(37, 211, 102, 0.45); --sombra-fab: 0 6px 20px rgba(7, 61, 30, 0.30); /* ── WhatsApp: color de marca de un tercero, se conserva para que el canal siga siendo reconocible ── */ --color-wa: #25D366; --color-wa-texto: #073D1E; --pulso-wa-inicio: rgba(37, 211, 102, 0.45); --pulso-wa-fin: rgba(37, 211, 102, 0); /* ══════════════════════════════════════════════════════════ 3. TIPOGRAFÍA (p. 15) Playfair Display — Regular e Italic. Poppins — Regular y Light. El manual no declara más pesos, así que el sitio no usa más. ══════════════════════════════════════════════════════════ */ --font-titular: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-cuerpo: 'Poppins', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --peso-titular: 400; --peso-cuerpo: 400; --peso-ligero: 300; /* ══════════════════════════════════════════════════════════ 4. FORMA Y MOVIMIENTO No especificados por el manual; se conservan los del sitio para no alterar el layout (ver BRAND_AUDIT.md). ══════════════════════════════════════════════════════════ */ /* ── Escala tipográfica modular, razón 1.25 ── */ --txt-xs: 0.64rem; --txt-sm: 0.8rem; --txt-base: 1rem; --txt-md: 1.25rem; --txt-lg: 1.563rem; --txt-xl: 1.953rem; --txt-2xl: 2.441rem; --txt-3xl: 3.052rem; --txt-4xl: 3.815rem; /* ── Escala de espaciado, base 8px ── */ --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 32px; --esp-5: 40px; --esp-6: 48px; --esp-8: 64px; --esp-12: 96px; /* ── Ritmo vertical entre secciones ── */ --ritmo: 64px; --radio-sm: 12px; --radio-md: 14px; --radio-lg: 20px; --radio-xl: 22px; --radio-2xl: 24px; --radio-pill: 100px; --radio-circulo: 50%; --sombra-base: var(--sombra-tarjeta); --ancho-max: 1200px; --ancho-texto: 880px; --padding-lateral: clamp(20px, 4vw, 32px); --padding-cabecera: clamp(130px, 18vh, 190px); --ease-suave: cubic-bezier(0.22, 1, 0.36, 1); --t-rapida: 250ms; --t-media: 300ms; --t-larga: 350ms; --t-lenta: 500ms; }