/* ========================================================================== FicVault · tokens de diseño "Grabado" Copiar a app/static/css/tokens.css y enlazar DESPUÉS de fuentes.css. Fuente de verdad: referencia/Main.dc.html (biblioteca), Login.dc.html y Lector.dc.html. Cómo se usa: - (data-theme ya existe en la web: lo guarda localStorage "site_theme"). - Los dibujos a lapicera usan color: var(--ink) y var(--hl). ========================================================================== */ :root { color-scheme: light; /* ---- Papel y tinta (modo claro) ---- */ --bg: #F1EADD; /* fondo de página (crema) */ --surface: #F1EADD; /* fondo de paneles: igual que la página, se separan con línea fina */ --card: #F8F4EB; /* tarjeta del login */ --input: #FBF8F1; /* fondo de campos de texto */ --sunken: #E6DDCA; /* fondos hundidos: hover, píldoras, pistas */ --text: #1F1D1B; /* texto principal (tinta negra) */ --muted: #5C554B; /* texto secundario */ --line: rgba(31, 29, 27, .45); /* TODAS las líneas son finas (1px) y de este color */ --pri: #2B2926; /* botón principal (relleno) */ --on-pri: #F1EADD; /* texto sobre botón principal */ --gold: #C5A46D; /* dorado: subrayado, progreso, foco suave */ --gold-ink: #7A5C24; /* dorado oscuro: etiquetas y enlaces sobre crema */ --hl: #C5A46D; /* resaltado "marcador" (subrayado grueso bajo una palabra) */ --focus: #7A5C24; /* contorno de foco del teclado */ --good: #2F6B45; /* terminado / éxito */ --on-good: #FFFFFF; --error: #8E3B2F; /* mensajes de error */ /* ---- Acento de la biblioteca (el usuario elige uno) ---- */ --a1: #34483D; /* bosque (claro) */ --a2: #8FB39B; /* bosque (oscuro) */ --a3: #222A26; /* bosque (fondo oscuro de paneles) */ --ink: var(--a1); /* color de los dibujos a lapicera */ /* ---- Tipografías ---- */ --ff-display: 'Cormorant Garamond', Georgia, serif; /* títulos, nombres, números de página */ --ff-serif: Lora, Georgia, serif; /* subtítulos en cursiva, texto de lectura */ --ff-ui: Inter, system-ui, sans-serif; /* botones, etiquetas, formularios */ /* ---- Formas ---- */ --r-pill: 99px; /* botones, chips, buscador, selector de vistas */ --r-input: 12px; /* campos de texto */ --r-arco: 150px 150px 22px 22px; /* tarjeta del login */ --r-arco-s: 150px 150px 16px 16px; /* mosaico de colección */ --r-cover: 2px 4px 4px 2px; /* portada de libro (lomo a la izquierda) */ /* ---- Sombras (en "Grabado" casi no hay; solo en portadas y en el lector) ---- */ --shadow-cover: 0 1px 0 rgba(0, 0, 0, .35), 0 8px 14px -10px rgba(0, 0, 0, .5); --shadow-card: 0 34px 60px -38px rgba(0, 0, 0, .45); } [data-theme="dark"] { color-scheme: dark; --bg: #232124; --surface: #232124; --card: #2B292C; --input: #262427; --sunken: #2D2A2F; --text: #EFE8DA; --muted: #B9B1A3; --line: rgba(239, 232, 218, .4); --pri: #EFE8DA; --on-pri: #232124; --gold: #C5A46D; --gold-ink: #D3B77F; --hl: #C5A46D; --focus: #E0C99A; --good: #6FBF8B; --on-good: #17261D; --error: #E7A092; --ink: var(--a2); /* en modo oscuro los dibujos usan el tono claro del acento */ } /* ---- Luz según la hora (solo en las pantallas de la app y en modo claro) ---- El papel toma la luz como una habitación: al atardecer se calienta un grado y de noche se enfría apenas. Nadie lo nota de golpe (el cambio de tema ya se funde). En oscuro no cambia. --muted sigue en 6,05:1 y 6,09:1. */ [data-momento="atardecer"]:not([data-theme="dark"]) .fv-app-body { --bg: #F2E8D6; --surface: #F2E8D6; } [data-momento="noche"]:not([data-theme="dark"]) .fv-app-body { --bg: #EFE9DF; --surface: #EFE9DF; } /* ---- Acentos: la web guarda uno por usuario ---- */ [data-accent="bosque"] { --a1: #34483D; --a2: #8FB39B; --a3: #222A26; } [data-accent="azul"] { --a1: #2E4057; --a2: #9DB8D6; --a3: #1F2630; } [data-accent="ciruela"] { --a1: #54384A; --a2: #D1A9C2; --a3: #2A2027; } [data-accent="cobre"] { --a1: #7A4A32; --a2: #E3AE8E; --a3: #2D241F; } /* ---- Papel del lector (independiente del modo de la web) ---- --pg = hoja · --mesa = fondo detrás de las hojas (solo escritorio) · --fg = texto --mu = secundario · --ink = dibujos · --ln = líneas */ .papel-crema { --pg: #F1EADD; --mesa: #E2D8C5; --fg: #1F1D1B; --mu: #5C554B; --ink: #34483D; --ln: rgba(31, 29, 27, .45); } .papel-blanco { --pg: #FBFAF6; --mesa: #E9E5DC; --fg: #1F1D1B; --mu: #5C554B; --ink: #34483D; --ln: rgba(31, 29, 27, .40); } .papel-noche { --pg: #232124; --mesa: #161517; --fg: #EFE8DA; --mu: #B9B1A3; --ink: #8FB39B; --ln: rgba(239, 232, 218, .40); } /* ---- Utilidades que se repiten en todas las pantallas ---- */ /* Ocultar barra de desplazamiento visualmente en toda la web (mantiene el scroll activo) */ html, body, * { scrollbar-width: none !important; -ms-overflow-style: none !important; } ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { display: none !important; background: transparent !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Palabra resaltada con "marcador" dorado (ej.: "Entrá a tu biblioteca") */ .hl { box-shadow: inset 0 -.3em 0 rgba(197, 164, 109, .5); } /* Etiqueta pequeña en mayúsculas sobre un título (ej.: "TU RINCÓN DE LECTURA") */ .over { margin: 0; font: 700 11px var(--ff-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); } /* Foco visible para teclado (obligatorio en todo lo que se pueda tocar) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Dibujos a lapicera incrustados ( de dibujos/*.html pegado con {% include %} dentro de un contenedor) */ .dib { color: var(--ink); pointer-events: none; } .dib svg { display: block; width: 100%; height: auto; } /* Respeta a quien pide menos movimiento. En las pantallas de la app (body.fv-app-body) cada pieza trae su versión quieta (fundidos cortos o el estado final, ver fv-movimiento.css y fv-app.css): cortar todo en seco también cansa. El resto (portada, entrar, lector) sigue con el corte general de siempre. */ @media (prefers-reduced-motion: reduce) { body:not(.fv-app-body), body:not(.fv-app-body) *, body:not(.fv-app-body) *::before, body:not(.fv-app-body) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }