/* * Tokens de diseño y temas. * * Dos temas: **claro**, que es el de casa, y **oscuro**. Solo se redefinen variables —ni un * componente sabe de qué color es—, así que cambiar de tema no puede romper una pantalla. * * Hubo tres, con nombres de la época naval: «abismo», «fósforo» —la pantalla verde de un * sonar— y «papel», que era una carta náutica. Eran del juego, no de la plataforma, y con * varios juegos encima ya no decían nada. Y el claro pasa a ser el de partida: es el que * espera casi todo el mundo al abrir una web, y el oscuro se elige. * * El tema se decide **antes del primer pintado**, en un guion corto dentro del `` * (ver `layout.php`): si se dejara al módulo de JavaScript, quien tiene el oscuro puesto * vería un fogonazo blanco en cada carga. */ :root { color-scheme: light; --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius-1: 6px; --radius-2: 12px; --radius-3: 20px; --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 12px 32px rgb(0 0 0 / .35); --transition: 160ms cubic-bezier(.2, .7, .3, 1); /* La cabecera es pegajosa: cualquier otro elemento pegajoso tiene que dejarle sitio o queda medio tapado al hacer scroll. */ --header-h: 4.5rem; /* ── Tema claro: el de casa ───────────────────────────────────────────── */ --bg: #f6f7f9; --bg-deep: #eceef2; --surface: #ffffff; --surface-2: #f1f3f7; --line: #dde1e8; --text: #16202b; --text-dim: #5f6b7a; --accent: #0e8f76; --accent-ink: #ffffff; --accent-2: #2563c9; --warn: #b06a00; --danger: #c2352f; /* * Los colores de jugar. * * Son los cuatro palos de la baraja y valen para todo lo demás: cada juego coge uno, * las luces del fondo se hacen con ellos y una tarjeta se distingue de otra sin leerla. * Están puestos a mano y no calculados: los cuatro tienen que aguantar sobre el fondo * claro y sobre el oscuro, y eso una fórmula no lo garantiza. */ --oros: #f2a33c; --copas: #e2574c; --espadas: #3d7fd6; --bastos: #4fae5a; --shadow-1: 0 1px 2px rgb(22 32 43 / .08); --shadow-2: 0 14px 34px rgb(22 32 43 / .12); } /* * ── Tema oscuro ─────────────────────────────────────────────────────────────── * * No es el claro con los colores dados la vuelta. El fondo es un gris azulado y no un * negro: sobre negro puro, el texto claro «vibra» y cansa a los diez minutos, que es * justo lo que dura una partida. Las superficies suben de tono según se acercan —fondo, * tarjeta, tarjeta encima de tarjeta— para que la profundidad se vea sin sombras, que en * oscuro no se ven. * * El verde del acento es el mismo del tapete, un poco más claro para que cumpla el * contraste sobre fondo oscuro. */ :root[data-theme="oscuro"] { color-scheme: dark; --bg: #10151b; --bg-deep: #0a0e13; --surface: #171d25; --surface-2: #1f2732; --line: #2b3542; --text: #e7edf3; --text-dim: #9aa8b8; --accent: #3fd7ac; --accent-ink: #06231b; --accent-2: #6aa9ff; --warn: #ffb454; --danger: #ff7b74; /* En oscuro los mismos cuatro, un punto más vivos: sobre fondo oscuro un color apagado se lee como gris. */ --oros: #ffbe5c; --copas: #ff7a6e; --espadas: #6aa9ff; --bastos: #6fd07c; --shadow-1: 0 1px 2px rgb(0 0 0 / .5); --shadow-2: 0 14px 34px rgb(0 0 0 / .45); }