/* Nonio — tokens de marca. GENERADO por brand/generar-tokens.mjs desde tokens.json. No editar a mano: los cambios se pierden en la próxima generación. DOS TEMAS (D-26). El claro es el predeterminado en las dos superficies y vive en :root. El oscuro lo pide el usuario con el botón del encabezado, que pone data-theme="dark" en y recuerda la elección en el navegador (clave en theme.toggle.storageKey de tokens.json). Nunca se elige por el sistema operativo ni por la hora: si el usuario no tocó el botón, el tema es claro. */ :root, :root[data-theme="light"] { /* capas */ --fondo: #F4F7F8; /* fondo de página */ --superficie: #FFFFFF; /* panel, tabla, documento */ --regla: #D3D7DE; /* bordes y divisores. No es texto. */ /* texto */ --tinta: #101828; /* texto y titulares */ --tinta-2: #475467; /* texto secundario */ --tinta-3: #475467; /* obsoleto: alias de --tinta-2 */ /* acción — el cian tiene dos oficios y no son intercambiables */ --acento: #0E7490; /* TEXTO: enlaces, iconos, bordes de foco */ --acento-vivo: #22D3EE; /* RELLENO: botón primario, fila resaltada, barra de acento. No usar para texto. */ --sobre-acento: #08111A; /* texto sobre relleno vivo */ /* estado — siempre con glifo o palabra, nunca solo color */ --cuadra: #067647; --cuadra-fondo: #E4F0EA; --pendiente: #B54708; --pendiente-fondo: #F8EFDC; --descuadre: #B42318; --descuadre-fondo: #F8E7E4; /* rampa de neutros */ --n-100:#F6FAFF; --n-200:#D3D7DE; --n-300:#B2B6BD; --n-400:#92969D; --n-500:#73777E; --n-600:#565A61; --n-700:#3A3E45; --n-800:#20242B; --n-900:#0F131A; /* radios y espaciado */ --radio-sm: 2px; --radio-md: 4px; --radio-lg: 8px; --espacio-unidad: 4px; /* tipografía */ --fuente-logotipo: "Groonex", system-ui, sans-serif; /* solo el logotipo */ --fuente-interfaz: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --fuente-hecho: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; color-scheme: light; } /* Tema oscuro, a pedido del usuario. Lo activa el botón del encabezado en cualquiera de las dos superficies. Mismos nombres de variable: el componente no sabe en qué tema está. */ :root[data-theme="dark"] { --fondo:#08111A; --superficie:#101828; --regla:#475467; --tinta:#ECF3F7; --tinta-2:#94A9B8; --tinta-3:#94A9B8; --acento:#22D3EE; --acento-vivo:#22D3EE; --sobre-acento:#08111A; --cuadra:#32D583; --cuadra-fondo:#0E2A1E; --pendiente:#FDB022; --pendiente-fondo:#2B2109; --descuadre:#FF7B72; --descuadre-fondo:#2E1512; color-scheme: dark; } /* Obligatorio en toda cifra que sea un dato. Inter trae cifras proporcionales por defecto: sin esto, las columnas no alinean al décimo decimal. */ .cifra, td.num, .tabular { font-variant-numeric: tabular-nums; }