/* =====================================================================
Camino a Guadalupe · tokens de diseño
Mundo: "El manto y la tilma". El azul del manto es la estructura
(cabecera, reproductor, hoja de desbloqueo), el papel del libro es la
superficie de lectura, el oro es la luz (estrellas, filetes) y la rosa
de Castilla es la acción (botones que hacen algo).
Detalle completo y componentes: trabajo/design/DESIGN.md
Colores en hex (sRGB) a propósito: oklch() no existe en iOS < 15.4 y
parte del público usa iPhone viejo. El equivalente OKLCH va al lado.
Contrastes medidos (WCAG) en trabajo/design/DESIGN.md.
Fuentes (Google Fonts, una sola petición):
===================================================================== */
:root {
color-scheme: light dark;
/* ---------- Rampas crudas (no usar directo en componentes) ---------- */
--manto-950: #0c2a35; /* oklch(0.27 0.045 222) */
--manto-900: #123b48; /* oklch(0.33 0.05 220) azul del libro */
--manto-800: #17495a; /* oklch(0.39 0.06 220) */
--manto-700: #23637a; /* oklch(0.48 0.075 220) manto de la imagen */
--manto-500: #4f8a9b; /* oklch(0.61 0.065 215) */
--manto-300: #9fc2c9; /* oklch(0.79 0.04 210) */
--manto-100: #dcebec; /* oklch(0.93 0.017 205) */
--manto-50: #eef5f4; /* oklch(0.97 0.008 190) */
--oro-700: #7a5a1c; /* oklch(0.49 0.09 78) texto dorado sobre papel */
--oro-500: #a87a1e; /* oklch(0.6 0.12 78) estrella encendida sobre papel */
--oro-400: #c7ad74; /* oklch(0.75 0.07 85) filete, marco del libro */
--oro-300: #e8c56f; /* oklch(0.84 0.11 88) estrella sobre el manto */
--oro-100: #f5e7c2; /* oklch(0.93 0.05 90) banner de prueba */
--rosa-800: #8f2a43; /* oklch(0.44 0.13 10) */
--rosa-700: #9b2c45; /* oklch(0.46 0.14 10) texto rosa: referencias */
--rosa-600: #a8344f; /* oklch(0.5 0.15 10) botón de acción */
--rosa-300: #f29bb0; /* oklch(0.77 0.1 5) */
--rosa-50: #fbeaea; /* oklch(0.95 0.02 15) */
--papel-50: #fffcf5; /* tarjeta sobre el fondo */
--papel-100: #fbf6ea; /* fondo, el mismo papel del PDF */
--papel-200: #f3ecdc; /* zona hundida */
/* ---------- Semánticos: lo que usan los componentes ---------- */
--c-fondo: var(--papel-100);
--c-superficie: var(--papel-50);
--c-superficie-2: var(--papel-200);
--c-tinta: #21323a; /* 12.3:1 sobre fondo */
--c-tinta-2: #4a5960; /* 6.7:1 texto secundario */
--c-tinta-3: #5f6c70; /* 5.0:1 pie de foto, nunca menor */
--c-titulo: var(--manto-900);
--c-linea: var(--oro-400); /* filete dorado, decorativo */
--c-linea-suave: #e4d9bf; /* separadores */
--c-borde-control: #8a7a55; /* 3.4:1, bordes de campos */
--c-manto: var(--manto-900); /* campo azul de la cabecera */
--c-manto-2: var(--manto-800); /* tarjetas sobre el manto */
--c-sobre-manto: #f6eedb; /* 10.4:1 */
--c-sobre-manto-2: #b7d5da; /* 7.8:1, teñido del manto */
--c-oro: var(--oro-300); /* estrellas y luz sobre el manto */
--c-oro-texto: var(--oro-700); /* 5.9:1 sobre fondo */
--c-resplandor: rgb(232 197 111 / 0.28);
/* Estrellas: llenas siempre. El estado lo dan brillo, halo (hoy) y el
contador "1 de 46" en texto; nunca solo el color. */
--c-estrella: var(--oro-500); /* encendida, sobre papel */
--c-estrella-apagada: #d8ccae; /* día que aún no llega */
--c-estrella-manto-apagada: #4a7685; /* sobre el manto; 3:1 contra el oro */
--c-accion: var(--rosa-600); /* 6.2:1 con --c-sobre-accion */
--c-accion-hover: var(--rosa-800);
--c-sobre-accion: #fffaf2;
--c-rosa-texto: var(--rosa-700); /* 6.9:1 */
--c-rosa-suave: var(--rosa-50);
--c-hecho: var(--manto-700); /* "Ya recé hoy" */
--c-hecho-suave: var(--manto-50);
--c-banner: var(--oro-100); /* prueba abierta */
--c-banner-fin: var(--rosa-50); /* prueba terminada */
--c-foco: var(--rosa-600);
--c-velo: rgb(12 42 53 / 0.62); /* detrás de la hoja */
--c-seleccion: rgb(232 197 111 / 0.45);
/* ---------- Tipografía ---------- */
--f-titulo: "Cinzel", "Trajan Pro", "Times New Roman", serif;
--f-lectura: "EB Garamond", "Garamond", Georgia, serif;
/* Source Sans 3: humanista, compacta (los botones caben en una línea) y con
cero sin barra. Atkinson Hyperlegible se probó y se descartó: su cero
tachado hace que "MX$100" y "20 minutos" parezcan código. */
--f-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Control "Aa": */
--escala-letra: 1;
/* Escala ~1.2. Nada de texto por debajo de 16px. */
--t-pie: 1rem; /* 16px pie, etiquetas de barra */
--t-ui-sm: calc(1.0625rem * var(--escala-letra)); /* 17px meta */
--t-ui: calc(1.125rem * var(--escala-letra)); /* 18px UI, botones */
--t-lectura: calc(1.3125rem * var(--escala-letra)); /* 21px Garamond: ojo de 18px sans */
--t-oracion: calc(1.375rem * var(--escala-letra)); /* 22px visor de oración */
--t-h3: calc(1.375rem * var(--escala-letra)); /* 22px subtítulo de sección */
--t-h2: 1.625rem; /* 26px Cinzel */
--t-h1: 1.875rem; /* 30px Cinzel, título del día */
--t-display: 2.5rem; /* 40px número grande */
--lh-lectura: 1.6;
--lh-ui: 1.45;
--lh-titulo: 1.15;
--tracking-titulo: 0.01em; /* Cinzel ya es ancho; no abrir más */
--medida: 36rem; /* ~65ch de Garamond a 21px */
/* ---------- Espacio (base 4px) ---------- */
--e-1: 0.25rem; /* 4 */
--e-2: 0.5rem; /* 8 */
--e-3: 0.75rem; /* 12 */
--e-4: 1rem; /* 16 */
--e-5: 1.25rem; /* 20 margen lateral */
--e-6: 1.5rem; /* 24 */
--e-8: 2rem; /* 32 */
--e-10: 2.5rem; /* 40 */
--e-12: 3rem; /* 48 */
--e-16: 4rem; /* 64 */
--margen: var(--e-5);
--ancho-app: 30rem; /* 480px, columna en tablet/escritorio */
/* ---------- Forma ----------
Regla única: lo que se toca es píldora; lo que contiene es 16px;
la imagen principal va en arco de nicho. */
--r-control: 999px;
--r-tarjeta: 16px;
--r-pequeno: 10px;
--r-nicho: 999px 999px var(--r-tarjeta) var(--r-tarjeta);
--r-hoja: 24px 24px 0 0;
/* ---------- Sombra (teñida de manto, nunca negra) ---------- */
--sombra-1: 0 1px 2px rgb(18 59 72 / 0.08), 0 2px 8px -2px rgb(18 59 72 / 0.1);
--sombra-2: 0 2px 4px rgb(18 59 72 / 0.08), 0 12px 28px -10px rgb(18 59 72 / 0.28);
--sombra-hoja: 0 -10px 40px -8px rgb(12 42 53 / 0.4);
--brillo-estrella: drop-shadow(0 0 6px rgb(232 197 111 / 0.75));
/* ---------- Toque ---------- */
--toque: 48px; /* mínimo */
--toque-cta: 56px; /* botón principal */
--barra-alto: 72px; /* barra inferior, sin safe-area */
/* ---------- Movimiento ---------- */
--ease-salida: cubic-bezier(0.22, 1, 0.36, 1); /* quint out */
--ease-entrada: cubic-bezier(0.64, 0, 0.78, 0);
--d-rapida: 160ms;
--d-media: 280ms;
--d-lenta: 480ms;
--d-estrella: 900ms; /* el único momento coreografiado */
/* ---------- Capas ---------- */
--z-barra: 20;
--z-banner: 30;
--z-velo: 40;
--z-hoja: 50;
--z-aviso: 60;
}
:root[data-letra="grande"] { --escala-letra: 1.15; }
:root[data-letra="muy-grande"] { --escala-letra: 1.3; }
/* ---------- Modo oscuro: la noche del manto ---------- */
@media (prefers-color-scheme: dark) {
:root {
--c-fondo: #0d2630;
--c-superficie: #1a4352;
--c-superficie-2: #0a1f28;
--c-tinta: #f3ead6; /* 13.1:1 */
--c-tinta-2: #b7d5da; /* 10.1:1 fondo, 6.9:1 tarjeta */
--c-tinta-3: #9cc2c8; /* 5.6:1 tarjeta */
--c-titulo: #f3ead6;
--c-linea: #8c7848;
--c-linea-suave: #2a5566;
--c-borde-control: #6f8f97;
--c-manto: #123b48;
--c-manto-2: #17495a;
--c-oro-texto: var(--oro-300); /* 9.5:1 */
--c-estrella: var(--oro-300);
--c-estrella-apagada: #2c5260;
--c-accion: #b8435f; /* 5.0:1 con marfil */
--c-accion-hover: #a63a55; /* 6.0:1 */
--c-rosa-texto: var(--rosa-300); /* 7.6:1 */
--c-rosa-suave: #3a1f2a;
--c-hecho: #9fc2c9;
--c-hecho-suave: #17495a;
--c-banner: #3b3320;
--c-banner-fin: #3a1f2a;
--c-foco: var(--oro-300);
--c-velo: rgb(4 14 18 / 0.72);
--sombra-1: 0 1px 2px rgb(0 0 0 / 0.3);
--sombra-2: 0 12px 28px -10px rgb(0 0 0 / 0.55);
--sombra-hoja: 0 -10px 40px -8px rgb(0 0 0 / 0.6);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--d-rapida: 1ms;
--d-media: 1ms;
--d-lenta: 1ms;
--d-estrella: 1ms;
}
}