/* ============================================================ TOKENS.CSS — Sistema de diseño de Templo (base oscura) ============================================================ Todo el sitio se construye sobre estas variables. La base es OSCURA: predomina el negro, el texto es claro. Nombres semánticos (qué es cada variable): - --fondo: fondo principal del sitio - --fondo-alterno: secciones alternadas (apenas más claro) - --borde: líneas y bordes suaves - --tenue: texto muy apagado (precios tachados, kanji) - --texto-suave: texto secundario (descripciones) - --texto: texto principal - --contraste: máximo contraste (títulos, botones sólidos) ============================================================ */ :root { /* ---- Base oscura ---- */ --fondo: #141414; --fondo-alterno: #1C1C1C; --borde: #2C2C2C; --tenue: #4E4E4E; --texto-suave: #9C9C9C; --texto: #DCDCDC; --contraste: #F5F2ED; /* ---- Tipografía ---- */ --font-display: 'Lora', serif; --font-body: 'Inter', -apple-system, sans-serif; /* ---- Escala tipográfica (mobile first, crece en desktop) ---- */ --text-xs: 0.75rem; --text-sm: 0.85rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.5rem; --text-2xl: clamp(1.8rem, 4vw, 2.6rem); --text-hero: clamp(2.4rem, 7vw, 4.8rem); /* ---- Espaciado ---- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 7rem; /* ---- Movimiento ---- */ --ease-suave: cubic-bezier(0.25, 0.1, 0.25, 1); --dur-corta: 0.25s; --dur-media: 0.6s; --dur-larga: 1.2s; /* ---- Otros ---- */ --radio: 2px; --ancho-max: 1180px; --sombra-suave: 0 10px 40px rgba(0, 0, 0, 0.45); } /* ============================================================ TEMAS — solo cambia el color de acento sobre la base oscura. El tema activo se define en . ============================================================ */ /* "sumi" — tinta: el acento es el propio claro. ACTIVO. */ :root, [data-theme="sumi"] { --acento: #F5F2ED; --acento-suave: #242424; --acento-texto: #141414; } /* "templo" — azul de marca (disponible por si se quiere volver) */ [data-theme="templo"] { --acento: #7FA6C9; --acento-suave: #1B2530; --acento-texto: #10161C; } /* "aka" — rojo sello */ [data-theme="aka"] { --acento: #C86456; --acento-suave: #2A1D1A; --acento-texto: #1A0F0D; } /* "kin" — dorado apagado */ [data-theme="kin"] { --acento: #C0A870; --acento-suave: #262117; --acento-texto: #1A160D; }