/* ============================================================================ ZIBA · tokens.css Sistema de diseño "Onyx — lujo silencioso". Carbón profundo · champagne · ivory. Serif Didot para títulos. ORDEN DE CARGA OBLIGATORIO: tokens.css → base.css → componentes.css REGLA PARA TODOS LOS AGENTES: NUNCA escribas un color, un radio, una sombra o un tamaño de fuente "a mano" en tu módulo. Usá SIEMPRE una variable de este archivo. Si te falta un token, usá el más parecido — no inventes un hex nuevo. ── TEMA ──────────────────────────────────────────────────────────────────── El tema se controla con el atributo data-tema en : → Onyx (por defecto, el aprobado por las dueñas) → Alabastro (caja de día, pantalla con reflejo) sin atributo → sigue al sistema operativo, con Onyx de base Se cambia con ui.setTema('oscuro' | 'claro' | 'auto'). ── DENSIDAD ──────────────────────────────────────────────────────────────── Tres contextos de uso, un solo sistema. Atributo data-densidad en : "tactil" → iPad del salón: todo grande, 52px de alto de control. "normal" → por defecto / celular de las dueñas. "compacta" → Mac de caja: más información en pantalla, 36px de control. Lo setea solo el shell (ui.js detecta puntero y ancho); se puede forzar con ui.setDensidad('tactil'|'normal'|'compacta'). ========================================================================== */ /* ───────────────────────────── ESCALAS FIJAS ───────────────────────────── No dependen del tema. */ :root { /* Tipografías (familias del sistema — no hay fuentes externas) */ --ff-serif: "Didot", "Bodoni 72", "Playfair Display", "Hoefler Text", Georgia, "Times New Roman", serif; --ff-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; --ff-num: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* Escala tipográfica — en rem, escalada por --fs-base (ver densidad) */ --fs-base: 15px; /* lo pisa la densidad */ --ts-micro: 0.6875rem; /* 11px · rótulos en versalita */ --ts-mini: 0.75rem; /* 12px · metadatos */ --ts-sm: 0.8125rem; /* 13px · texto secundario, tablas compactas */ --ts-base: 0.9375rem; /* 15px · cuerpo */ --ts-md: 1.0625rem; /* 17px · destacado, filas táctiles */ --ts-lg: 1.25rem; /* 20px · subtítulos */ --ts-xl: 1.5rem; /* 24px · título de modal */ --ts-2xl: 2rem; /* 32px · título de pantalla */ --ts-3xl: 2.625rem; /* 42px · cifras protagonistas (total a cobrar) */ --ts-4xl: 3.5rem; /* 56px · pantalla de cobro */ --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; --lh-apretado: 1.15; --lh-titulo: 1.25; --lh-cuerpo: 1.55; --lh-suelto: 1.7; --ls-titulo: 0.01em; --ls-cuerpo: 0.01em; --ls-rotulo: 0.2em; /* versalitas tipo "RECAUDACIÓN DEL DÍA" */ --ls-wordmark: 0.38em; /* Espaciado — base 4 */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Radios */ --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-full: 999px; /* Anchos y alturas de layout */ --ancho-nav: 244px; --ancho-max: 1440px; --ancho-lectura: 68ch; --alto-cabecera: 76px; --alto-navinf: 68px; /* Áreas tocables — mínimo absoluto en cualquier contexto */ --toque-min: 48px; --alto-control: 44px; /* lo pisa la densidad */ --alto-control-sm: 36px; --pad-control-x: 16px; /* Movimiento — suave y corto, nada rebota */ --mv-rapido: 120ms; --mv-normal: 200ms; --mv-lento: 320ms; --mv-curva: cubic-bezier(.22, .61, .36, 1); --mv-entrada: cubic-bezier(.16, .84, .44, 1); /* Capas */ --z-base: 1; --z-pegajoso: 20; --z-navinf: 40; --z-banner: 60; --z-modal: 80; --z-toast: 90; --z-bloqueo: 100; } /* ─────────────────────── TEMA OSCURO · "ONYX" (base) ─────────────────────── */ :root, :root[data-tema="oscuro"] { color-scheme: dark; /* Fondos */ --fondo: #131215; /* lienzo de la app */ --fondo-velo: radial-gradient(1100px 520px at 78% -12%, rgba(200,183,149,.055), transparent 60%), radial-gradient(900px 620px at -10% 110%, rgba(200,183,149,.028), transparent 55%); /* 🔴 20-ago · "el color del sistema está muy oscuro, no se ve muy bien" (José, mirando la Mac de caja con luz de día). Las superficies estaban muy pegadas al lienzo —#1B1A1F sobre #131215 son 8 puntos de diferencia— y en una pantalla con reflejo las tarjetas se confundían con el fondo. Se separan sin cambiar la identidad: siguen siendo grises calientes, solo que ahora se distinguen unas de otras. */ --sup-1: #232128; /* tarjetas, barras */ --sup-2: #2C2A33; /* tarjeta sobre tarjeta, campos */ --sup-3: #37343E; /* hover / seleccionado */ --sup-hundida: rgba(0,0,0,.30); /* carriles, zonas de fondo */ /* Texto */ --txt-1: #F3EFE7; /* principal — 15.6:1 sobre --fondo */ --txt-2: #BDB6A9; /* secundario — 8.1:1 */ --txt-3: #A69E92; /* apagado / metadatos — se subió el 20-ago por contraste */ --txt-inv: #17161A; /* texto sobre superficie de acento */ /* Acento — champagne */ --acento: #C8B795; /* texto y bordes de acento — 9.9:1 */ --acento-fuerte: #C8B795; /* fondo del botón primario */ --acento-txt: #17161A; /* texto SOBRE --acento-fuerte */ --acento-hover: #D8C9AB; --acento-tenue: rgba(200,183,149,.13); /* fondos seleccionados */ --acento-velo: rgba(200,183,149,.06); /* Líneas */ --linea: rgba(200,183,149,.18); --linea-suave: rgba(200,183,149,.09); --linea-fuerte: rgba(200,183,149,.34); /* Semánticos */ --ok: #7FB98A; --ok-tenue: rgba(127,185,138,.14); --aviso: #E0A867; --aviso-tenue: rgba(224,168,103,.14); --peligro: #E08A8A; --peligro-fuerte: #B44A4A; /* fondo del botón de peligro */ --peligro-txt: #FFF4F4; /* texto sobre --peligro-fuerte */ --peligro-tenue: rgba(224,138,138,.14); --info: #8FB4CC; --info-tenue: rgba(143,180,204,.14); /* Estados de la agenda / salón (mismo lenguaje en todos los módulos) */ --est-espera: #B9A9C9; /* Esperando */ --est-atencion: #C8B795; /* En atención */ --est-caja: #7FB98A; /* En caja / listo */ --est-fin: #7A7469; /* Cerrado / histórico */ /* Sombras */ --sombra-1: 0 1px 2px rgba(0,0,0,.34); --sombra-2: 0 6px 18px rgba(0,0,0,.38); --sombra-3: 0 18px 44px rgba(0,0,0,.48); --sombra-modal: 0 28px 72px rgba(0,0,0,.62); --sombra-foco: 0 0 0 3px rgba(200,183,149,.34); /* Velos de superposición */ --velo-modal: rgba(9, 8, 11, .68); --desenfoque: blur(14px); /* Esqueleto de carga */ --esq-base: rgba(200,183,149,.07); --esq-brillo: rgba(200,183,149,.14); } /* ────────────────── TEMA CLARO · "ALABASTRO" (explícito) ────────────────── */ :root[data-tema="claro"] { color-scheme: light; --fondo: #F7F4EE; --fondo-velo: radial-gradient(1100px 520px at 80% -14%, rgba(122,100,56,.045), transparent 62%), radial-gradient(900px 620px at -10% 112%, rgba(122,100,56,.028), transparent 58%); --sup-1: #FFFDF9; --sup-2: #F2EDE3; --sup-3: #E9E2D4; --sup-hundida: rgba(26,24,28,.035); --txt-1: #1A181C; /* 16.5:1 sobre --sup-1 */ --txt-2: #4A453D; /* 9.2:1 */ --txt-3: #706A5F; /* 5.4:1 (AA) */ --txt-inv: #FFFDF9; --acento: #7A6438; /* bronce — 5.3:1 sobre el fondo */ --acento-fuerte: #7A6438; --acento-txt: #FFFDF9; /* 5.7:1 sobre el bronce */ --acento-hover: #63512C; --acento-tenue: rgba(122,100,56,.11); --acento-velo: rgba(122,100,56,.05); --linea: rgba(26,24,28,.14); --linea-suave: rgba(26,24,28,.07); --linea-fuerte: rgba(122,100,56,.42); --ok: #2F6B45; --ok-tenue: rgba(47,107,69,.11); --aviso: #8A5A11; --aviso-tenue: rgba(138,90,17,.12); --peligro: #A32A2A; --peligro-fuerte: #A32A2A; --peligro-txt: #FFF6F5; --peligro-tenue: rgba(163,42,42,.10); --info: #2A5F80; --info-tenue: rgba(42,95,128,.11); --est-espera: #6A5580; --est-atencion: #7A6438; --est-caja: #2F6B45; --est-fin: #8B8478; --sombra-1: 0 1px 2px rgba(26,24,28,.07); --sombra-2: 0 6px 18px rgba(26,24,28,.09); --sombra-3: 0 18px 44px rgba(26,24,28,.13); --sombra-modal: 0 28px 72px rgba(26,24,28,.22); --sombra-foco: 0 0 0 3px rgba(122,100,56,.28); --velo-modal: rgba(36, 31, 24, .38); --desenfoque: blur(14px); --esq-base: rgba(26,24,28,.06); --esq-brillo: rgba(26,24,28,.11); } /* Sin data-tema: seguimos al sistema. Onyx es la base, así que solo hay que describir el caso claro. Repetimos los valores en lugar de heredar para que cada tema esté definido explícitamente. */ @media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]):not([data-tema="claro"]) { color-scheme: light; --fondo: #F7F4EE; --fondo-velo: radial-gradient(1100px 520px at 80% -14%, rgba(122,100,56,.045), transparent 62%), radial-gradient(900px 620px at -10% 112%, rgba(122,100,56,.028), transparent 58%); --sup-1: #FFFDF9; --sup-2: #F2EDE3; --sup-3: #E9E2D4; --sup-hundida: rgba(26,24,28,.035); --txt-1: #1A181C; --txt-2: #4A453D; --txt-3: #706A5F; --txt-inv: #FFFDF9; --acento: #7A6438; --acento-fuerte: #7A6438; --acento-txt: #FFFDF9; --acento-hover: #63512C; --acento-tenue: rgba(122,100,56,.11); --acento-velo: rgba(122,100,56,.05); --linea: rgba(26,24,28,.14); --linea-suave: rgba(26,24,28,.07); --linea-fuerte: rgba(122,100,56,.42); --ok: #2F6B45; --ok-tenue: rgba(47,107,69,.11); --aviso: #8A5A11; --aviso-tenue: rgba(138,90,17,.12); --peligro: #A32A2A; --peligro-fuerte: #A32A2A; --peligro-txt: #FFF6F5; --peligro-tenue: rgba(163,42,42,.10); --info: #2A5F80; --info-tenue: rgba(42,95,128,.11); --est-espera: #6A5580; --est-atencion: #7A6438; --est-caja: #2F6B45; --est-fin: #8B8478; --sombra-1: 0 1px 2px rgba(26,24,28,.07); --sombra-2: 0 6px 18px rgba(26,24,28,.09); --sombra-3: 0 18px 44px rgba(26,24,28,.13); --sombra-modal: 0 28px 72px rgba(26,24,28,.22); --sombra-foco: 0 0 0 3px rgba(122,100,56,.28); --velo-modal: rgba(36, 31, 24, .38); --esq-base: rgba(26,24,28,.06); --esq-brillo: rgba(26,24,28,.11); } } /* ─────────────────────────── DENSIDADES ─────────────────────────── */ /* iPad del salón: dedos, a veces con las manos ocupadas o con guantes. */ :root[data-densidad="tactil"] { --fs-base: 17px; --alto-control: 52px; --alto-control-sm: 44px; --pad-control-x: 20px; --ts-sm: 0.875rem; /* 14px — nada más chico que esto en la tablet */ --ts-mini: 0.8125rem; --ts-micro: 0.75rem; --densidad-fila: var(--sp-4); --densidad-tarjeta: var(--sp-5); } :root, :root[data-densidad="normal"] { --densidad-fila: var(--sp-3); --densidad-tarjeta: var(--sp-5); } /* Mac de caja: mouse, teclado, mucha información a la vista. */ :root[data-densidad="compacta"] { --fs-base: 14.5px; --alto-control: 36px; --alto-control-sm: 30px; --pad-control-x: 12px; --densidad-fila: var(--sp-2); --densidad-tarjeta: var(--sp-4); } /* Accesibilidad: si el sistema pide menos movimiento, se apaga todo. */ @media (prefers-reduced-motion: reduce) { :root { --mv-rapido: 0ms; --mv-normal: 0ms; --mv-lento: 0ms; } } /* Más contraste si el sistema lo pide. */ @media (prefers-contrast: more) { :root { --linea: var(--linea-fuerte); --txt-3: var(--txt-2); } }