/* ============================================================ NATUREFIT LAS REJAS — TOKENS DE MARCA Dirección visual: "Herbario" (Fase 2, aprobada 25-07-2026) Esta es la ÚNICA fuente de verdad de colores, tipografías, espaciados y radios. Ninguna pieza debe usar valores sueltos: todo se toma de aquí. Cómo usarlo en un archivo HTML: y después, por ejemplo: color: var(--nf-verde-bosque); ============================================================ */ /* ---- Tipografías ---- La copia de marca trae acá un @import a fonts.googleapis.com. En la web se sirven desde el propio dominio: ver fuentes.css, que se carga antes que este archivo. Esta línea la reescribe scripts/generar-tokens-web.js — no editar a mano. ---- */ :root { /* ========================================================== 1. COLORES — valores crudos ========================================================== */ /* Primario */ --nf-verde-bosque: #1F4D33; /* rgb(31, 77, 51) */ --nf-verde-bosque-oscuro: #163826; /* rgb(22, 56, 38) — hover */ /* Secundario */ --nf-verde-salvia: #7D8F6B; /* rgb(125, 143, 107) */ /* Acento — el ocre del letrero, en dos versiones. IMPORTANTE: el ocre gráfico NO cumple contraste para texto. Para cualquier palabra escrita en ocre, usar --nf-ocre-texto. */ --nf-ocre-grafico: #C08A2E; /* rgb(192, 138, 46) */ --nf-ocre-texto: #8A5E1E; /* rgb(138, 94, 30) */ /* Neutros */ --nf-tinta: #23211C; /* rgb(35, 33, 28) */ --nf-gris-calido: #6E6857; /* rgb(110, 104, 87) */ --nf-linea: #DED8C8; /* rgb(222, 216, 200) */ --nf-crudo: #F4F1E8; /* rgb(244, 241, 232) */ --nf-marfil: #FBF9F3; /* rgb(251, 249, 243) */ /* Funcionales */ --nf-exito: #2A7248; --nf-error: #A33A28; /* Excepción declarada: verde oficial de WhatsApp. Único color fuera de paleta. Se admite solo en botones de contacto, por reconocimiento inmediato. REGLA: sobre este verde va SIEMPRE texto oscuro, nunca blanco. */ --nf-whatsapp: #25D366; /* ========================================================== 2. COLORES — roles semánticos Usa estos en las piezas; los de arriba son la materia prima. ========================================================== */ --nf-fondo: var(--nf-crudo); --nf-superficie: var(--nf-marfil); --nf-texto: var(--nf-tinta); --nf-texto-suave: var(--nf-gris-calido); --nf-texto-destacado: var(--nf-ocre-texto); --nf-titular: var(--nf-verde-bosque); --nf-borde: var(--nf-linea); --nf-boton-fondo: var(--nf-verde-bosque); --nf-boton-texto: var(--nf-crudo); --nf-boton-hover: var(--nf-verde-bosque-oscuro); --nf-boton2-fondo: var(--nf-ocre-grafico); --nf-boton2-texto: var(--nf-tinta); --nf-sobre-oscuro: var(--nf-crudo); /* texto sobre verde bosque */ --nf-sobre-ocre: var(--nf-tinta); /* texto sobre ocre gráfico */ /* ========================================================== 3. TIPOGRAFÍA ========================================================== */ --nf-fuente-titulo: 'Lora', Georgia, 'Times New Roman', serif; --nf-fuente-cuerpo: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Respaldo del sistema si no hay internet: Lora → Georgia Lato → Segoe UI (Windows) / Helvetica (Mac) */ --nf-peso-titulo: 600; --nf-peso-titulo-alto: 700; --nf-peso-cuerpo: 400; --nf-peso-cuerpo-alto: 700; --nf-peso-caption: 900; /* --- Escala para pantalla / web / UI --- */ --nf-txt-display: 44px; --nf-lh-display: 1.08; --nf-txt-h1: 34px; --nf-lh-h1: 1.12; --nf-txt-h2: 26px; --nf-lh-h2: 1.20; --nf-txt-h3: 20px; --nf-lh-h3: 1.30; --nf-txt-destacado:19px; --nf-lh-destacado:1.45; --nf-txt-cuerpo: 17px; --nf-lh-cuerpo: 1.60; --nf-txt-chico: 15px; --nf-lh-chico: 1.55; --nf-txt-caption: 13px; --nf-lh-caption: 1.40; /* --- Escala para piezas de Instagram (lienzo 1080 px) --- */ --nf-post-antetitulo: 26px; --nf-post-titular: 76px; --nf-post-titular-2: 64px; --nf-post-bajada: 34px; --nf-post-tarjeta-t: 30px; --nf-post-tarjeta-c: 26px; --nf-post-cta: 28px; --nf-post-legal: 20px; --nf-track-caption: 0.14em; /* espaciado de letras en mayúsculas */ --nf-track-titular: -0.01em; /* ========================================================== 4. ESPACIADO ========================================================== */ --nf-esp-1: 4px; --nf-esp-2: 8px; --nf-esp-3: 12px; --nf-esp-4: 16px; --nf-esp-5: 24px; --nf-esp-6: 32px; --nf-esp-7: 48px; --nf-esp-8: 64px; --nf-esp-9: 96px; /* Margen interior de las piezas de Instagram (lienzo 1080) */ --nf-margen-post: 80px; /* ========================================================== 5. FORMA ========================================================== */ --nf-radio-chico: 4px; --nf-radio: 6px; --nf-radio-grande: 10px; --nf-radio-pill: 999px; --nf-borde-fino: 1px solid var(--nf-linea); --nf-borde-fuerte: 2px solid var(--nf-verde-bosque); --nf-sombra-suave: 0 2px 10px rgba(35, 33, 28, 0.08); --nf-sombra-card: 0 4px 18px rgba(35, 33, 28, 0.10); /* ========================================================== 6. TEXTURA — patrón botánico derivado de la cenefa del letrero Uso: background-image: var(--nf-patron); background-size: var(--nf-patron-tam); ========================================================== */ --nf-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62' viewBox='0 0 62 62'%3E%3Cg fill='none' stroke='%231F4D33' stroke-width='1.1' opacity='0.17' stroke-linecap='round'%3E%3Cpath d='M31 56 L31 16'/%3E%3Cpath d='M31 34 C39 34 45 28 45 20 C37 20 31 26 31 34 Z'/%3E%3Cpath d='M31 44 C23 44 17 38 17 30 C25 30 31 36 31 44 Z'/%3E%3Cpath d='M31 24 C37 24 41 20 41 14 C35 14 31 18 31 24 Z'/%3E%3C/g%3E%3C/svg%3E"); --nf-patron-ocre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62' viewBox='0 0 62 62'%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1.1' opacity='0.28' stroke-linecap='round'%3E%3Cpath d='M31 56 L31 16'/%3E%3Cpath d='M31 34 C39 34 45 28 45 20 C37 20 31 26 31 34 Z'/%3E%3Cpath d='M31 44 C23 44 17 38 17 30 C25 30 31 36 31 44 Z'/%3E%3Cpath d='M31 24 C37 24 41 20 41 14 C35 14 31 18 31 24 Z'/%3E%3C/g%3E%3C/svg%3E"); --nf-patron-tam: 62px 62px; }