/* divídelo — tokens del sistema de diseño Liquid Glass sobre esmeralda. Ver docs/sistema-de-diseno.md El tema vive siempre en el atributo data-theme de , que fija un script en el a partir de la preferencia del sistema. Así los valores oscuros se declaran UNA vez; con una media query aparte habría que mantener dos copias y tarde o temprano se desincronizan. */ :root, :root[data-theme="light"] { /* --- Fondo --- */ --bg-base: #dff5ea; /* * La malla del fondo. Es lo que el cristal refracta: si el fondo es plano, * las tarjetas no tienen nada que desenfocar y todo parece cartón. Necesita * una zona claramente luminosa y otra oscura para que se note el volumen. */ --mesh: radial-gradient(64% 44% at 78% 6%, rgba(255, 248, 236, 0.95) 0%, transparent 62%), radial-gradient(58% 40% at 12% 18%, rgba(216, 247, 232, 0.95) 0%, transparent 64%), radial-gradient(70% 46% at 88% 72%, rgba(233, 249, 210, 0.8) 0%, transparent 66%), radial-gradient(80% 52% at 8% 96%, rgba(198, 239, 228, 0.9) 0%, transparent 68%), linear-gradient(170deg, #eafaf1 0%, #d4f1e5 55%, #e9f8de 100%); /* Monedas del fondo (.bg-coins): cristal blanco con una sombra verde muy suave, para que se lean sobre la malla clara sin competir con la interfaz. */ --coins-display: block; --coin-face: linear-gradient( 165deg, rgba(255, 255, 255, 0.95) 12%, rgba(255, 255, 255, 0.38) 58%, rgba(255, 255, 255, 0.7) 100% ); --coin-edge: rgba(255, 255, 255, 0.75); --coin-shadow: drop-shadow(0 10px 18px rgba(6, 48, 42, 0.1)); /* Marco de móvil de las capturas del tutorial */ --bezel: #0e2723; --bezel-rim: rgba(255, 255, 255, 0.55); /* --- Cristal --- */ --glass-bg: rgba(255, 255, 255, 0.5); --glass-bg-solid: rgba(255, 255, 255, 0.93); --glass-border: rgba(255, 255, 255, 0.55); --glass-shadow: 0 14px 34px rgba(6, 48, 42, 0.14); /* Velo de luz sobre el cristal: más claro arriba, como una superficie curva que recoge la luz del ambiente. */ --glass-sheen: linear-gradient( 180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 34%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.24) 100% ); /* Filo especular del borde: brillante arriba, tenue en los lados. Esto es lo que separa "cristal" de "rectángulo semitransparente". */ --rim: linear-gradient( 165deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.45) 26%, rgba(255, 255, 255, 0.18) 52%, rgba(255, 255, 255, 0.8) 100% ); --glass-sel-bg: rgba(255, 255, 255, 0.68); --glass-sel-shadow: 0 16px 34px rgba(15, 163, 127, 0.22); --glass-sel-glow: 0 0 20px rgba(15, 163, 127, 0.16); --rim-sel: linear-gradient( 165deg, rgba(255, 255, 255, 1) 0%, rgba(126, 217, 87, 0.7) 32%, rgba(15, 163, 127, 0.55) 62%, rgba(255, 255, 255, 0.95) 100% ); --glass-muted-bg: rgba(255, 255, 255, 0.26); --glass-muted-border: rgba(255, 255, 255, 0.4); --rim-muted: linear-gradient( 165deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.28) 100% ); /* --- Acento --- */ --accent-1: #0fa37f; --accent-2: #7ed957; --accent-grad: linear-gradient(100deg, var(--accent-1), var(--accent-2)); --accent-solid: #0b8f6e; /* Tinta sobre el acento: el blanco sobre el extremo lima no pasa contraste (1,5:1). Con tinta verde oscura el peor punto queda en 4,6:1. */ --on-accent: #06302a; /* Círculo del check */ --check-bg: linear-gradient(140deg, #0fa37f, #7ed957); --check-fg: #ffffff; /* --- Texto --- */ --text: #06302a; --text-muted: #3f6257; --text-faint: #648579; /* --- Aviso --- */ --warning: #f5a45c; --warning-bg: rgba(245, 164, 92, 0.24); --warning-border: rgba(245, 164, 92, 0.6); --warning-text: #7a4210; /* --- Error --- */ --danger: #c23a4c; --danger-bg: rgba(209, 73, 91, 0.14); color-scheme: light; } :root[data-theme="dark"] { --bg-base: #05352f; --mesh: radial-gradient(70% 42% at 22% 4%, rgba(155, 245, 200, 0.45) 0%, transparent 62%), radial-gradient(62% 38% at 86% 22%, rgba(14, 158, 116, 0.75) 0%, transparent 64%), radial-gradient(75% 50% at 12% 62%, rgba(11, 107, 79, 0.9) 0%, transparent 68%), radial-gradient(90% 60% at 74% 104%, rgba(3, 38, 33, 0.95) 0%, transparent 70%), linear-gradient(168deg, #0a5c46 0%, #074038 52%, #052f2a 100%); /* En oscuro las monedas serían manchas claras sobre el degradado: fuera. */ --coins-display: none; /* Sobre fondo oscuro el marco se funde: el filo claro lo separa */ --bezel: #03181a; --bezel-rim: rgba(155, 245, 200, 0.28); --glass-bg: rgba(210, 255, 236, 0.12); --glass-bg-solid: rgba(10, 66, 56, 0.96); --glass-border: rgba(255, 255, 255, 0.16); --glass-shadow: 0 16px 36px rgba(0, 0, 0, 0.42); --glass-sheen: linear-gradient( 180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0.02) 64%, rgba(255, 255, 255, 0.1) 100% ); --rim: linear-gradient( 165deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.22) 28%, rgba(255, 255, 255, 0.08) 54%, rgba(255, 255, 255, 0.45) 100% ); --glass-sel-bg: rgba(155, 245, 200, 0.28); --glass-sel-shadow: 0 18px 38px rgba(0, 0, 0, 0.45); --glass-sel-glow: 0 0 30px rgba(155, 245, 200, 0.38); --rim-sel: linear-gradient( 165deg, rgba(255, 255, 255, 1) 0%, rgba(200, 255, 228, 0.7) 30%, rgba(155, 245, 200, 0.45) 60%, rgba(255, 255, 255, 0.95) 100% ); --glass-muted-bg: rgba(0, 0, 0, 0.3); --glass-muted-border: rgba(255, 255, 255, 0.08); --rim-muted: linear-gradient( 165deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.12) 100% ); --accent-1: #9bf5c8; --accent-2: #6fe3c4; --accent-grad: linear-gradient(100deg, var(--accent-1), var(--accent-2)); --accent-solid: #9bf5c8; --on-accent: #06302a; /* En oscuro el check es un disco blanco con la marca verde, como el diseño */ --check-bg: #ffffff; --check-fg: #0b8f6e; --text: #ffffff; /* Mínimo 78 %: por debajo, el texto sobre cristal se pierde en las zonas claras del degradado. */ --text-muted: rgba(255, 255, 255, 0.78); --text-faint: rgba(255, 255, 255, 0.62); --warning: #f5a45c; --warning-bg: rgba(245, 164, 92, 0.18); --warning-border: rgba(245, 164, 92, 0.45); --warning-text: #ffd2a6; --danger: #ff8fa0; --danger-bg: rgba(255, 143, 160, 0.16); color-scheme: dark; } /* --- Comunes a los dos temas --- */ :root { /* Forma */ --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; /* Espacio */ --gap-xs: 6px; --gap-sm: 10px; --gap: 16px; --gap-lg: 24px; --gap-xl: 36px; /* Cristal: intensidad */ --blur: 24px; --blur-strong: 34px; --saturate: 165%; /* Tipografía */ --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Seguridad de pantalla */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Avatares: la misma persona, el mismo color en ambos temas */ --av-0: #7fe3c0; --av-1: #8fc5f5; --av-2: #c3b0f7; --av-3: #ffb99a; --av-4: #ffd98a; --av-5: #f7a8c8; --av-6: #9ae6a1; --av-7: #a8d8f0; } /* * Modo ligero: el cristal de verdad (varias capas de backdrop-filter) va fino * en iPhone y se atasca en Android de gama baja. Ahí se cambia por superficies * opacas — el diseño se mantiene, la app deja de ir a tirones. */ :root.perf-lite { --blur: 0px; --blur-strong: 0px; --glass-bg: var(--glass-bg-solid); --glass-sheen: none; } @media (prefers-reduced-transparency: reduce) { :root { --blur: 0px; --blur-strong: 0px; --glass-bg: var(--glass-bg-solid); } }