/* Rocka — tokens de diseño. Blanco + naranja vermellón (hue 42) + petróleo teal (hue 205), neutro hue 210. Cada token está recortado dentro de sRGB a propósito: el hex y el OKLCH son el MISMO color en toda pantalla, así web, escritorio y móvil rinden idéntico. El teal no es decoración: es el medidor de nivel, el estado "procesando" y el tinte de toda la rampa neutra. */ /* IBM Plex, auto-hospedada en el 102. Licencia SIL Open Font License 1.1, verificada contra el archivo del paquete; copia en /fonts/license.txt. Sin estas reglas la fuente NO se carga: declararla en font-family solo funciona si el visitante ya la tiene instalada, y en un Windows de fabrica no la tiene. */ @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* marca */ --naranja-50: #FFF3EE; --naranja-100: #FFE4DA; --naranja-200: #FFCAB6; --naranja-300: #FEA684; --naranja-400: #FE8655; --naranja-500: #F1631E; --naranja-600: #D65514; --naranja-700: #B54B19; --naranja-800: #883813; --naranja-900: #5E260D; --naranja-950: #401A0A; /* tercer color */ --teal-50: #EAF9FB; --teal-100: #D2F0F4; --teal-200: #B2E2E7; --teal-300: #78C6CF; --teal-400: #49AFBA; --teal-500: #0998A4; --teal-600: #057A84; --teal-700: #036169; --teal-800: #004046; --teal-900: #00292D; --teal-950: #02191B; /* neutros con tinte teal */ --gris-0: #FDFEFE; --gris-25: #F7FAFA; --gris-50: #F1F5F6; --gris-100: #E3E8E9; --gris-200: #D0D8D9; --gris-300: #B0B9BB; --gris-400: #8A9496; --gris-500: #636E70; --gris-600: #4D585A; --gris-700: #384244; --gris-800: #232C2E; --gris-900: #151D1F; --gris-950: #080E10; --exito-100: #D8F1DD; --exito-500: #44975F; --exito-700: #1F6338; --exito-900: #163620; --peligro-100: #FFE1E1; --peligro-500: #D1364C; --peligro-700: #96192F; --peligro-900: #50141B; /* --- roles, tema claro --- */ --fondo: var(--gris-25); --superficie: var(--gris-0); --superficie-2: var(--gris-50); --borde: var(--gris-200); --borde-fuerte: var(--gris-300); --texto: var(--gris-900); --texto-tenue: var(--gris-500); --texto-inverso: var(--gris-0); --acento: var(--naranja-500); --acento-hover: var(--naranja-600); --acento-suave: var(--naranja-50); /* El naranja vivo NO pasa 4.5:1 con texto blanco encima: el glifo del botón de grabar es casi negro, no blanco. */ --sobre-acento: var(--gris-950); --acento-texto: var(--naranja-700); /* naranja legible sobre fondo claro */ --proceso: var(--teal-500); --proceso-suave: var(--teal-50); --proceso-texto: var(--teal-700); --medidor: var(--teal-500); --medidor-pista: var(--teal-100); --exito: var(--exito-700); --exito-fondo: var(--exito-100); --peligro: var(--peligro-700); --peligro-fondo: var(--peligro-100); /* El anillo de foco NUNCA es del color del botón que rodea: sobre el botón naranja no se vería. */ --foco: var(--teal-600); /* tipografía */ --fuente: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fuente-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; /* la transcripción se lee y se corrige: 17px/28px y medida de 68ch */ --t-lectura: 1.0625rem; --interlineado-lectura: 1.65; --medida: 68ch; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px; --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --e-12: 3rem; --sombra-1: 0 1px 2px rgb(8 14 16 / 0.06), 0 1px 3px rgb(8 14 16 / 0.04); --sombra-2: 0 4px 12px rgb(8 14 16 / 0.08), 0 2px 4px rgb(8 14 16 / 0.04); /* Curvas fuertes: las de CSS son demasiado débiles. NUNCA ease-in en interfaz: arranca lento justo cuando el usuario mira. */ --salida: cubic-bezier(0.23, 1, 0.32, 1); --entrada-salida: cubic-bezier(0.77, 0, 0.175, 1); } /* --- tema oscuro --- No es invertir el claro: el naranja saturado que funciona sobre blanco quema sobre negro, así que el acento sube de luminosidad y baja de croma. El texto no es blanco puro y lleva más interlineado. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fondo: #0A1A1C; --superficie: #172628; --superficie-2: #233234; --borde: #324042; --borde-fuerte: #49585B; --texto: #E7EDEE; --texto-tenue: #A7B2B4; --texto-inverso: var(--gris-950); --acento: var(--naranja-400); --acento-hover: var(--naranja-300); --acento-suave: #2A1710; --sobre-acento: var(--gris-950); --acento-texto: var(--naranja-300); --proceso: var(--teal-400); --proceso-suave: #0C2B2F; --proceso-texto: var(--teal-300); --medidor: var(--teal-400); --medidor-pista: #22383B; --exito: var(--exito-400, #63B37A); --exito-fondo: #15291B; --peligro: #EB5A67; --peligro-fondo: #2E1418; --foco: var(--teal-300); --interlineado-lectura: 1.75; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 4px 12px rgb(0 0 0 / 0.5); } } :root[data-tema="oscuro"] { --fondo: #0A1A1C; --superficie: #172628; --superficie-2: #233234; --borde: #324042; --borde-fuerte: #49585B; --texto: #E7EDEE; --texto-tenue: #A7B2B4; --texto-inverso: var(--gris-950); --acento: var(--naranja-400); --acento-hover: var(--naranja-300); --acento-suave: #2A1710; --sobre-acento: var(--gris-950); --acento-texto: var(--naranja-300); --proceso: var(--teal-400); --proceso-suave: #0C2B2F; --proceso-texto: var(--teal-300); --medidor: var(--teal-400); --medidor-pista: #22383B; --exito: #63B37A; --exito-fondo: #15291B; --peligro: #EB5A67; --peligro-fondo: #2E1418; --foco: var(--teal-300); --interlineado-lectura: 1.75; }