/* Nonio — tokens de marca. Generado desde tokens.json; no editar a mano. 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 nonio.theme). 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; /* 16.5:1 · AAA */ --tinta-2: #475467; /* 7.1:1 · AAA · texto secundario */ --tinta-3: #475467; /* obsoleto: alias de --tinta-2 */ /* acción — el cian tiene dos oficios y no son intercambiables */ --acento: #0E7490; /* 5.0:1 · AA · TEXTO, enlaces, iconos, bordes de foco */ --acento-vivo: #22D3EE; /* RELLENO: botón primario, fila resaltada, barra de acento. 1.68:1 como texto sobre claro: nunca usar para texto. */ --sobre-acento: #08111A; /* texto sobre relleno vivo: 10.5:1. Blanco da 1.8:1: prohibido */ /* estado — siempre con glifo o palabra, nunca solo color */ --cuadra: #067647; /* 5.3:1 · AA */ --cuadra-fondo: #E4F0EA; /* chip: 4.9:1 */ --pendiente: #B54708; /* 5.0:1 · AA */ --pendiente-fondo: #F8EFDC; /* chip: 4.8:1 */ --descuadre: #B42318; /* 6.1:1 · AA */ --descuadre-fondo: #F8E7E4; /* chip: 5.5:1 */ /* rampa de neutros · pasos de 12 puntos de L* exactos */ --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; /* 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; }