/** * tokens.css — el vocabulario visual de toda la app. * * La idea que organiza el color: EL MARCO NO CAMBIA, EL CIELO SÍ. * * El armazón (oro, pergamino, azul oscuro del menú de pausa) es constante * en toda la app, igual que en Ocarina of Time. Lo que cambia según el acto * del ciclo es la atmósfera de fondo, para que se note que la luna se acerca * sin que nadie tenga que decirlo. * * El acto se aplica con data-acto en y lo pone tiempo.js. */ :root { /* ── Armazón: constante en toda la app ───────────────────────────────── */ --oro: #d9b44a; --oro-claro: #f0d98a; --oro-oscuro: #8a6d1e; --pergamino: #efe3c4; --pergamino-hond: #d9c9a0; --tinta: #2b2113; --tinta-suave: #5c4c33; /* El azul del cuadro de diálogo clásico. */ --dialogo: #12203f; --dialogo-borde: #4a6fa8; /* Superficies del menú de pausa. */ --panel: #16182b; --panel-alto: #232640; --panel-borde: #4a4f78; /* ── Color con significado ───────────────────────────────────────────── */ --corazon: #e0473c; --rupia-verde: #5ec46a; --rupia-azul: #4a8fe0; --rupia-roja: #e0574a; --rupia-morada: #a86ade; --rupia-plata: #d8dde3; --rupia-oro: #e8c34a; --hada: #fff3a8; --exito: #6fbf5a; --peligro: #e0574a; /* ── Cielo: lo sobrescribe cada acto en actos.css ────────────────────── */ --cielo-alto: #4a86c8; --cielo-bajo: #a8d4ea; --cielo-tinte: #2c5580; --luna-y: 14%; --luna-escala: 0.55; /* ── Tipografía ──────────────────────────────────────────────────────── */ /* Cinzel para los títulos y EB Garamond para el cuerpo: las dos con licencia OFL, así que se pueden empaquetar sin problema. Si algún día metes Hylia Serif en fonts/, basta con ponerla la primera aquí. */ --fuente-titulo: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif; --fuente-cuerpo: 'EB Garamond', Georgia, 'Times New Roman', serif; --fuente-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-numero: 'Cinzel', Georgia, serif; /* Escala fluida: crece con la pantalla sin media queries. */ --t-xs: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem); --t-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.92rem); --t-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem); --t-md: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --t-lg: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem); --t-xl: clamp(1.8rem, 1.4rem + 1.9vw, 2.8rem); --t-xxl: clamp(2.6rem, 1.8rem + 3.6vw, 4.5rem); /* ── Espacio ─────────────────────────────────────────────────────────── */ --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem; /* ── Formas ──────────────────────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-full: 999px; --borde-oro: 2px solid var(--oro); /* ── Sombras ─────────────────────────────────────────────────────────── */ --sombra-baja: 0 2px 6px rgba(0,0,0,.35); --sombra-media: 0 6px 18px rgba(0,0,0,.45); --sombra-alta: 0 14px 40px rgba(0,0,0,.55); --brillo-oro: 0 0 12px rgba(217,180,74,.5); /* ── Movimiento ──────────────────────────────────────────────────────── */ --rapido: 120ms; --normal: 260ms; --lento: 600ms; --curva: cubic-bezier(.22,.75,.3,1); /* ── Capas ───────────────────────────────────────────────────────────── */ --z-cielo: 0; --z-contenido: 10; --z-cabecera: 20; --z-pestanas: 25; --z-textbox: 40; --z-modal: 50; --z-aviso: 60; /* Alto real del área útil, descontando cabecera y pestañas. */ --alto-cabecera: 3.5rem; --alto-pestanas: 3.75rem; /* Franja de cielo que se deja ver arriba de cada pantalla, por encima del contenido. Es donde vive la luna y por donde asoman las fotos. En móvil se queda corta a propósito: ahí el alto es oro. */ --ventana-cielo: clamp(7.5rem, 26vh, 17rem); /* Aire entre la luna y el primer texto: sin esto la luna quedaba pegadísima al título y no respiraba. */ --respiro-luna: clamp(1rem, 3vh, 2.5rem); } /* Quien haya pedido menos movimiento en su sistema, lo recibe. */ @media (prefers-reduced-motion: reduce) { :root { --rapido: 1ms; --normal: 1ms; --lento: 1ms; } } /* Lo mismo desde los ajustes de la propia app. */ :root[data-movimiento='reducido'] { --rapido: 1ms; --normal: 1ms; --lento: 1ms; }