/* tokens.css - LOS VALORES DEL PROYECTO, EN UN SOLO LUGAR ========================================================== Este archivo es la autoridad sobre colores y medidas. Ningun componente escribe un color ni un tamano a mano: todos usan estas variables. Por que: si el desplegable de un select se ve mal, o si el acento cambia de azul a verde, se cambia ACA y cambia en todo el proyecto. Sin esto hay que buscarlo en cada archivo, que es el problema que este sistema existe para evitar. Si falta una variable, se agrega aca PRIMERO, y se anota en DICCIONARIO.md. ========================================================== */ :root { /* --- COLOR: superficies --- */ --c-fondo: #ffffff; /* fondo de la pagina */ --c-fondo-suave: #f6f7f9; /* la franja que alterna */ --c-superficie: #ffffff; /* tarjetas, cajas, paneles */ --c-borde: #e2e5ea; /* TODAS las lineas, sin excepcion */ /* El borde de un campo de formulario. Va APARTE de --c-borde por un motivo medido: en 8 de los 9 temas, --c-borde queda entre 1.23 y 1.67:1 contra el fondo, por debajo del 3:1 que pide WCAG 1.4.11 para el borde de un control. Ese borde tenue esta bien para una linea decorativa (una tabla, un separador) y mal para el unico rasgo que identifica un campo sobre el fondo. Como --c-borde es correcto para lo decorativo, no se endurece: se separa. La linea decorativa sigue teniendo su suelo de la casa (1.2); el campo tiene el suyo, y el verificador lo mide. */ --c-borde-campo: #6c757d; /* borde de campo: >=3:1 contra el fondo */ /* --- COLOR: texto --- */ --c-texto: #14181f; /* el texto normal */ --c-texto-suave: #5f6875; /* el secundario, ayudas, pies */ /* --- COLOR: marca y senales --- */ --c-acento: #1e3a8a; /* el color de marca */ --c-acento-texto: #ffffff; /* lo que va ENCIMA del acento */ --c-error: #c62828; --c-exito: #0f766e; --c-foco: #2563eb; /* el anillo de foco del teclado */ /* --- MEDIDAS --- */ --radio: 10px; --radio-chico: 8px; --radio-grande: 14px; --radio-pastilla: 999px; /* para las etiquetas redondas */ --ancho: 1160px; /* ancho maximo del contenido */ --ancho-texto: 780px; /* ancho maximo para texto corrido */ --margen: clamp(16px, 4vw, 24px); /* aire entre el contenido y el borde de la pantalla. FLUIDO: 16 en un telefono, 24 a partir de ~600px de ancho: el aire lateral crece sin saltos. Lo usan .contenedor y la barra de nav: por eso la marca del nav queda alineada con el texto de abajo. <=34px, o en movil el contenido pierde ancho util. */ --hueco: 20px; /* separacion entre cosas */ --hueco-chico: 10px; --hueco-grande: 32px; --hueco-seccion: clamp(56px, 8vw, 96px); /* aire entre secciones */ --alto-control: 44px; /* lo minimo comodo para el dedo */ /* --- MOVIMIENTO --- Nada por encima de 400 ms en una interfaz. Ver DICCIONARIO.md. */ --t-rapido: 150ms; --t-normal: 250ms; --t-lento: 400ms; /* ease-out para lo que entra: rapido al principio, suave al final */ --ease-salida: cubic-bezier(0.22, 1, 0.36, 1); --ease-entrada: cubic-bezier(0.4, 0, 1, 1); --ease-ida-vuelta: cubic-bezier(0.45, 0, 0.55, 1); /* --- TIPOGRAFIA --- */ --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fuente-titulo: var(--fuente-texto); --fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --t-xs: 0.82rem; /* metadatos; nunca es cuerpo de texto */ --t-sm: 0.875rem; --t-md: 1rem; --t-lg: clamp(1.05rem, 1.6vw, 1.15rem); --t-xl: clamp(1.5rem, 2.6vw, 1.9rem); --t-2xl: clamp(1.9rem, 4vw, 2.8rem); --t-3xl: clamp(2.3rem, 5.5vw, 3.8rem); --linea-apretada: 1.18; --linea-normal: 1.6; --linea-suelta: 1.8; /* --- SOMBRA --- */ --sombra-suave: 0 4px 14px rgba(15, 20, 30, 0.06); --sombra-media: 0 14px 32px rgba(15, 20, 30, 0.10); --sombra-fuerte: 0 18px 44px rgba(15, 20, 30, 0.16); } /* ========================================================== TEMA OSCURO Se declaran los mismos nombres con otros valores. La estructura no se toca: por eso un componente nunca necesita saber en que tema esta. Detalle que casi nadie aplica: en oscuro el texto NO es blanco puro. El blanco sobre negro produce halo y cansa la vista. ========================================================== */ @media (prefers-color-scheme: dark) { :root { --c-fondo: #0d1117; --c-fondo-suave: #161b22; --c-superficie: #161b22; --c-borde: #262c36; --c-borde-campo: #6b6b6b; --c-texto: #e6edf3; /* gris muy claro, NO blanco puro */ --c-texto-suave: #9198a1; --c-acento: #6ba1ff; /* el azul oscuro no sirve sobre negro */ --c-acento-texto: #06101f; --c-foco: #6ba1ff; --sombra-suave: 0 4px 14px rgba(0, 0, 0, 0.4); --sombra-media: 0 14px 32px rgba(0, 0, 0, 0.5); --sombra-fuerte: 0 18px 44px rgba(0, 0, 0, 0.6); } } /* Tema forzado a mano: se pone data-tema="oscuro" en . Va despues, asi que gana sobre la preferencia del sistema. */ [data-tema="oscuro"] { --c-fondo: #0d1117; --c-fondo-suave: #161b22; --c-superficie: #161b22; --c-borde: #262c36; --c-borde-campo: #6b6b6b; --c-texto: #e6edf3; --c-texto-suave: #9198a1; --c-acento: #6ba1ff; --c-acento-texto: #06101f; --c-foco: #6ba1ff; } /* Y el tema claro forzado, para una pagina que debe verse clara siempre */ [data-tema="claro"] { --c-fondo: #ffffff; --c-fondo-suave: #f6f7f9; --c-superficie: #ffffff; --c-borde: #e2e5ea; --c-borde-campo: #8a8a8a; --c-texto: #14181f; --c-texto-suave: #5f6875; --c-acento: #1e3a8a; --c-acento-texto: #ffffff; --c-foco: #2563eb; } /* En oscuro las imagenes claras deslumbran: se baja un poco el brillo */ @media (prefers-color-scheme: dark) { img { filter: brightness(0.9); } } [data-tema="oscuro"] img { filter: brightness(0.9); }