/* ZelvIA 2.0 — canonical design tokens. * Source: docs/DESIGN.md v1.3 (secciones 2, 3, 4, 4 bis). * This file defines values only; surfaces opt in to them explicitly. */ /* ─── Modo claro (por defecto) ──────────────────────────────────────────────── */ :root, :root[data-theme="claro"] { color-scheme: light; /* Fondos de papel */ --zv-color-bg: #F6F2E9; /* paper — fondo principal */ --zv-color-bg-deep: #F0EADF; /* paper-deep — sección alterna */ --zv-color-bg-panel: #ECE5D6; /* paper-panel — paneles hundidos */ --zv-color-bg-base: #E8E1D2; /* paper-base — pie de página */ --zv-color-surface: #FFFDF8; /* sheet — tarjetas y objetos en alto */ --zv-color-surface-subtle: #F0EADF; /* alias de bg-deep para compatibilidad */ /* Texto */ --zv-color-ink: #0B1320; /* texto principal */ --zv-color-ink-soft: #2A3340; /* lectura larga */ --zv-color-text: #2A3340; /* alias para compatibilidad */ --zv-color-muted: #56606C; /* texto secundario (mínimo para texto) */ --zv-color-evidence: #56606C; /* alias para compatibilidad */ /* Bordes */ --zv-color-line: #E3DCCD; /* filete claro */ --zv-color-line-strong: #D8CFBC; /* filete más visible */ /* Teal — cuatro roles distintos */ --zv-color-teal-text: #00665E; /* texto teal sobre papel (AA) */ --zv-color-teal-graphic: #00A99D; /* puntos, líneas, camino — nunca para texto sobre papel */ --zv-color-teal-link: #008F84; /* subrayado de enlaces */ --zv-color-teal-glow: #00F0D1; /* solo sobre navy */ --zv-color-teal-soft: #D4F0EC; /* fondo teal suave */ /* Compatibilidad — teal único del sistema anterior */ --zv-color-teal: #008F84; --zv-color-on-teal: #FFFFFF; /* Peligro */ --zv-color-danger: #A5343C; --zv-color-danger-soft: #FCE8E9; /* Aviso */ --zv-color-amber-bg: #F6E3C8; --zv-color-amber-text: #7A3B12; /* Marca */ --zv-color-navy: #0B1622; --zv-color-navy-btn: #17243A; /* gradiente en botones navy */ /* Lectura fija — no cambia con el tema */ --zv-color-paper-reading: #F6F2E9; --zv-reading-surface: #FFFDF8; --zv-reading-surface-subtle:#F0EADF; --zv-reading-ink: #0B1320; --zv-reading-text: #2A3340; --zv-reading-muted: #56606C; --zv-reading-evidence: #56606C; --zv-reading-line: #E3DCCD; --zv-reading-teal: #008F84; --zv-reading-teal-soft: #D4F0EC; --zv-reading-danger: #A5343C; --zv-reading-on-teal: #FFFFFF; /* Tipografía */ --zv-font-display: "Unbounded", sans-serif; --zv-font-ui: "Inter", sans-serif; --zv-font-weight-regular: 400; --zv-font-weight-medium: 500; --zv-font-weight-semibold: 600; --zv-font-weight-bold: 700; /* ── Escalas cerradas (DESIGN.md §4 bis) ──────────────────────────────────── */ /* Radios */ --zv-radius-label: 6px; /* etiquetas */ --zv-radius-row: 10px; /* filas y botones pequeños */ --zv-radius-btn: 14px; /* botones y fichas */ --zv-radius-field: 18px; /* campos y tarjetas */ --zv-radius-panel: 24px; /* paneles grandes */ --zv-radius-pill: 999px; /* pastillas */ /* Alturas (e) — sombras por plano */ --zv-shadow-e0: inset 0 2px 4px rgba(60,48,26,.14), inset 0 -1px 0 rgba(255,255,255,.8); --zv-shadow-e1: inset 0 1px 0 #fff, 0 1px 0 rgba(60,48,26,.10), 0 6px 12px -10px rgba(60,48,26,.5); --zv-shadow-e2: inset 0 1px 0 #fff, 0 10px 20px -16px rgba(60,48,26,.5); --zv-shadow-e3: inset 0 1px 0 #fff, 8px 10px 0 -1px #EFE9DC, 8px 10px 0 0 #DDD5C4, 0 28px 48px -30px rgba(60,48,26,.45); --zv-shadow-navy: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 #000, 0 12px 22px -12px rgba(11,19,32,.8); --zv-shadow-logo: inset 0 1px 2px rgba(60,48,26,.18); /* Alturas de controles */ --zv-height-sm: 40px; /* mínimo táctil */ --zv-height-md: 48px; /* secundario y botón del campo */ --zv-height-lg: 52px; /* principal */ --zv-height-xl: 64px; /* campo de búsqueda */ /* Espaciado */ --zv-space-1: 4px; --zv-space-2: 8px; --zv-space-3: 12px; --zv-space-4: 16px; --zv-space-6: 24px; --zv-space-8: 32px; --zv-space-12: 48px; --zv-space-20: 80px; --zv-space-32: 128px; /* Motion */ --zv-motion-enter-duration: 180ms; --zv-motion-enter-easing: cubic-bezier(0.2, 0, 0, 1); --zv-motion-micro-duration: 120ms; --zv-motion-micro-easing: cubic-bezier(0.4, 0, 0.2, 1); --zv-motion-stagger: 80ms; --zv-motion-trace-duration: 200ms; } /* ─── Modo oscuro (A-18 provisional — pendiente de diseño aprobado) ─────────── */ /* Los tokens oscuros se activarán cuando existan maestras visuales aprobadas * (DESIGN.md §2). El selector existe y guarda preferencia en zvTheme, * pero data-theme="oscuro" no altera la apariencia hasta que estos se descomenten. * * :root[data-theme="oscuro"] { * color-scheme: dark; * * --zv-color-bg: #081220; * --zv-color-bg-deep: #0A1628; * --zv-color-bg-panel: #0D1B2E; * --zv-color-bg-base: #0A1525; * --zv-color-surface: #0F1C2D; * --zv-color-surface-subtle: #152033; * * --zv-color-ink: #F2F5FA; * --zv-color-ink-soft: #D7E1E8; * --zv-color-text: #D7E1E8; * --zv-color-muted: #91A0AE; * --zv-color-evidence: #AAB5C0; * * --zv-color-line: #2E4152; * --zv-color-line-strong: #3A5068; * * --zv-color-teal-text: #00D4BD; * --zv-color-teal-graphic: #00A99D; * --zv-color-teal-link: #00F0D1; * --zv-color-teal-glow: #00F0D1; * --zv-color-teal-soft: #103C3A; * --zv-color-teal: #00F0D1; * --zv-color-on-teal: #03231F; * * --zv-color-danger: #E26470; * --zv-color-danger-soft: #2A1018; * * --zv-color-amber-bg: #2A1A08; * --zv-color-amber-text: #F6C580; * * --zv-color-navy: #081220; * --zv-color-navy-btn: #0D1B2E; * * --zv-shadow-e0: inset 0 2px 4px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.04); * --zv-shadow-e1: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.3), 0 6px 12px -10px rgba(0,0,0,.6); * --zv-shadow-e2: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 20px -16px rgba(0,0,0,.6); * --zv-shadow-e3: inset 0 1px 0 rgba(255,255,255,.06), 8px 10px 0 -1px #0D1B2E, 8px 10px 0 0 #0A1525, 0 28px 48px -30px rgba(0,0,0,.6); * --zv-shadow-navy: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.4), 0 12px 22px -12px rgba(0,0,0,.8); * --zv-shadow-logo: inset 0 1px 2px rgba(0,0,0,.3); * } */