/* ZeraGest — Design tokens Todo color, espacio, radio, sombra y duración se define UNA sola vez aquí. Paleta derivada del logo: azul marino + turquesa. */ :root { color-scheme: light; /* ---- Marca (logo ZeraGest) ---- */ --color-marca: #2f2e83; /* azul marino del logo */ --color-marca-fuerte: #23225f; --color-marca-suave: #ececf6; --color-marca-tenue: #f5f5fb; --color-acento: #33b3c4; /* turquesa del logo */ --color-acento-fuerte: #2790a0; --color-acento-suave: #e4f5f7; /* Fondo del menú lateral. Por defecto = color de marca; algunos temas (p. ej. oscuro) lo redefinen para que no quede desvaído. */ --color-sidebar: var(--color-marca); /* ---- Superficies y texto ---- */ --color-fondo: #f6f7fb; --color-superficie: #ffffff; --color-superficie-2: #fbfbfe; --color-borde: #e4e5ef; --color-borde-fuerte: #cdcfe0; --color-texto: #1c1d2b; --color-texto-2: #5b5d72; --color-texto-3: #8a8ca0; /* ---- Estados ---- */ --color-exito: #1f8a4c; --color-exito-suave: #e6f4ec; --color-aviso: #b7791f; --color-aviso-suave: #f9f0df; --color-error: #c0392b; --color-error-suave: #fbeae8; --color-info: #2b6cb0; --color-info-suave: #e7f0f9; /* Dinero */ --color-dinero-ok: #1f8a4c; --color-dinero-debe: #c0392b; /* ---- Tipografía ---- */ --fuente: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --texto-xs: .8125rem; --texto-sm: .875rem; --texto-md: 1rem; --texto-lg: 1.125rem; --texto-xl: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 650; /* ---- Espaciado ---- */ --espacio-1: .25rem; --espacio-2: .5rem; --espacio-3: .75rem; --espacio-4: 1rem; --espacio-5: 1.5rem; --espacio-6: 2rem; --espacio-8: 3rem; /* ---- Radios ---- */ --radio-sm: 6px; --radio-md: 10px; --radio-lg: 16px; --radio-full: 999px; /* ---- Sombras ---- */ --sombra-1: 0 1px 2px rgba(26, 24, 60, .06), 0 1px 3px rgba(26, 24, 60, .10); --sombra-2: 0 4px 14px rgba(26, 24, 60, .10); --sombra-3: 0 14px 36px rgba(26, 24, 60, .18); /* ---- Layout ---- */ --sidebar-ancho: 258px; --sidebar-ancho-min: 76px; --topbar-alto: 62px; --contenido-max: 1180px; --lectura-max: 720px; /* Ancho a partir del cual el menu lateral se vuelve cajon (drawer). Incluye tablets en vertical. */ --bp-drawer: 1024px; /* ---- Motion ---- Duraciones cortas a propósito: toda animación de UI queda < 300ms. Curvas propias (nunca las de CSS por defecto, que son demasiado flojas): --curva ease-out rápido → hover, press, cambios de estado --curva-entrada ease-out fuerte → elementos que aparecen --curva-cajon curva tipo iOS → SOLO hoja inferior / drawer lateral */ --dur-rapida: 120ms; --dur-media: 220ms; --dur-lenta: 360ms; --curva: cubic-bezier(.2, 0, 0, 1); --curva-entrada: cubic-bezier(.16, 1, .3, 1); --curva-cajon: cubic-bezier(.32, .72, 0, 1); /* ---- Foco ---- */ --anillo-foco: 0 0 0 3px var(--color-acento-suave), 0 0 0 5px var(--color-acento); } /* ───────────────────────────────────────────────────────────────────────── TEMAS · el usuario elige uno en Configuración → Preferencias. Cada bloque solo redefine los colores de marca/acento (y el tema "oscuro" también superficies y texto). El resto de tokens se hereda de :root. El atributo data-tema lo pone en base.html. ───────────────────────────────────────────────────────────────────────── */ /* Índigo — es el tema por defecto (igual que :root); se deja explícito. */ :root[data-tema="indigo"] { --color-marca: #2f2e83; --color-marca-fuerte: #23225f; --color-marca-suave: #ececf6; --color-marca-tenue: #f5f5fb; --color-acento: #33b3c4; --color-acento-fuerte: #2790a0; --color-acento-suave: #e4f5f7; } :root[data-tema="esmeralda"] { --color-marca: #0f766e; --color-marca-fuerte: #0b5751; --color-marca-suave: #dcefec; --color-marca-tenue: #f0f7f5; --color-acento: #f59e0b; --color-acento-fuerte: #c77f07; --color-acento-suave: #fdf0d9; --color-fondo: #f3f7f5; } :root[data-tema="vino"] { --color-marca: #9d174d; --color-marca-fuerte: #7c103c; --color-marca-suave: #f4dde7; --color-marca-tenue: #faf2f5; --color-acento: #fb7185; --color-acento-fuerte: #e04f66; --color-acento-suave: #fde4e8; --color-fondo: #f8f4f5; } :root[data-tema="atardecer"] { --color-marca: #c2410c; --color-marca-fuerte: #9a330a; --color-marca-suave: #f6e2d6; --color-marca-tenue: #fbf4ef; --color-acento: #0ea5e9; --color-acento-fuerte: #0b83ba; --color-acento-suave: #ddf1fb; --color-fondo: #f9f5f2; } :root[data-tema="grafito"] { --color-marca: #334155; --color-marca-fuerte: #1e293b; --color-marca-suave: #e2e8f0; --color-marca-tenue: #f1f5f9; --color-acento: #38bdf8; --color-acento-fuerte: #0ea5e9; --color-acento-suave: #e0f2fe; --color-fondo: #f4f6f9; } /* Oscuro — invierte superficies y texto. */ :root[data-tema="oscuro"] { color-scheme: dark; --color-marca: #818cf8; --color-marca-fuerte: #a5b4fc; --color-marca-suave: #262643; --color-marca-tenue: #1e1e30; --color-acento: #22d3ee; --color-acento-fuerte: #67e8f9; --color-acento-suave: #143038; --color-sidebar: #16161f; --color-fondo: #121220; --color-superficie: #1b1b2b; --color-superficie-2: #212134; --color-borde: #2f2f45; --color-borde-fuerte: #3d3d57; --color-texto: #e9e9f3; --color-texto-2: #b6b7c9; --color-texto-3: #8a8ca0; --color-exito-suave: #14311f; --color-aviso-suave: #33280f; --color-error-suave: #3a1d1a; --color-info-suave: #16283a; --sombra-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45); --sombra-2: 0 4px 14px rgba(0, 0, 0, .45); --sombra-3: 0 14px 36px rgba(0, 0, 0, .6); }