/* ============================================================ Metria — Tokens del sistema de diseño (I23.2 / E23) ------------------------------------------------------------ FUENTE ÚNICA de color, tipografía, radios y espacios para las TRES superficies del producto: la landing, las páginas de Identity (login / cuenta) y —más adelante— la SPA de React. Antes cada una traía su propio :root: `landing.css` y `auth.css` tenían bloques idénticos y duplicados, y el login no tenía modo oscuro. Cambiar un color exigía tocar tres archivos y acordarse del cuarto. ── Dos capas, y el porqué ──────────────────────────────────── 1. PRIMITIVAS (--stone-*, --petrol-*): los valores crudos. No se usan en los componentes. 2. SEMÁNTICAS (--bg, --panel, --accent…): dicen PARA QUÉ sirve el color, no de qué color es. Es lo único que consume el CSS. La separación existe para que agregar un tema sea redefinir la capa 2, no reescribir el CSS. Los cinco temas viejos se borran (E23, decisión 9) pero la capacidad se conserva: hoy hay uno, `petroleo`, y ApplicationUser.ThemeId sigue guardándolo. ── Los tres estados del tema, y por qué son tres ───────────── Quien no eligió nada NO tiene el atributo puesto, y ahí decide `prefers-color-scheme`. Definir un color solo dentro de un bloque [data-theme] es el error clásico que deja el texto de un tema sobre el fondo del otro. :root → claro, completo @media (dark) :root:not([data-theme="light"]) → oscuro por sistema :root[data-theme="dark"] → oscuro por elección El interruptor de la landing escribe SIEMPRE un valor explícito ("light" u "dark"), nunca lo borra: si lo borrara, un usuario que eligió claro sobre un sistema oscuro volvería a ver oscuro. ============================================================ */ :root { /* ─────────────── Capa 1 · primitivas ─────────────── */ /* Neutro cálido. Es el piso del producto: gris con sesgo cálido, no gris puro, para que conviva con el petróleo sin verse sucio. */ --stone-0: #FFFFFF; --stone-25: #FBFAF9; --stone-50: #F7F6F4; --stone-100: #EBE9E5; --stone-200: #D9D6D1; --stone-400: #9D978F; --stone-600: #6A655F; --stone-800: #2A2926; --stone-900: #1C1A18; --stone-950: #141312; /* Petróleo: el acento. Azul desaturado, legible sobre claro y sobre oscuro, y —clave— lejos del ámbar de los avisos. */ --petrol-50: #E8EFF2; --petrol-100: #D3E2E8; --petrol-300: #86B6C7; --petrol-500: #2D5A6B; --petrol-600: #244856; --petrol-900: #0D1315; /* Estado. Reservados: no se reutilizan como acento ni como serie. */ --amber-600: #8A6210; --amber-300: #CCA455; --green-600: #2F6B4F; --green-300: #6FAE8A; --red-600: #9A3A31; --red-300: #D08880; /* ─────────────── Capa 2 · semánticas ─────────────── */ --bg: var(--stone-50); /* fondo de la hoja */ --panel: var(--stone-0); /* superficie elevada */ --panel2: var(--stone-25); /* superficie sutil: hover, campos */ --line: var(--stone-100); /* separador fino */ --line2: var(--stone-200); /* borde de control */ --text: var(--stone-900); /* texto principal */ --text2: var(--stone-600); /* texto secundario */ --text3: var(--stone-400); /* códigos, metadatos */ --accent: var(--petrol-500); --accent-h: var(--petrol-600); /* hover del acento */ --accent-soft: var(--petrol-50); /* fondo del acento */ --accent-ink: var(--stone-0); /* texto sobre el acento */ --sel: #EDF2F4; /* fila seleccionada */ --warn: var(--amber-600); --warn-soft: #F8F1DF; --ok: var(--green-600); --ok-soft: #E7F0EA; --danger: var(--red-600); --danger-soft: #F8E8E6; /* Chrome siempre oscuro: barra superior de "Mi cuenta", pie de la landing, y —desde I23.14— el riel y la barra de la SPA. No invierte con el tema; solo se ajusta. Que la SPA reuse ESTOS tokens y no defina un oscuro propio es el punto entero de este archivo: la landing, Identity y la aplicación son tres superficies del mismo producto y con tres negros distintos se nota al pasar de una a otra. */ --dark: var(--stone-900); --dark2: var(--stone-800); --d-text: #E8E5E0; --d-text2: #A9A49D; --d-line: rgba(255, 255, 255, .08); --d-hover: rgba(255, 255, 255, .06); /* hover sobre chrome */ --d-sel: rgba(255, 255, 255, .10); /* item activo del riel */ /* El acento SOBRE chrome oscuro no puede ser `--accent`: el petróleo 500 contra el near-black da ~2.4:1 y no se lee. Va el 300, que es el mismo acento del modo oscuro. */ --d-accent: var(--petrol-300); /* ── Compatibilidad con el CSS existente ────────────────────── landing.css, auth.css y account.css ya usan estos nombres. Se mantienen mapeados para no reescribir 707 líneas: es la capa que se retira cuando esas hojas se rehagan. */ --paper: var(--panel2); --surface: var(--panel); --border: var(--line); --border2: var(--line2); --blue: var(--petrol-500); --blue-bg: var(--accent-soft); --green: var(--ok); --green-bg: var(--ok-soft); --amber: var(--warn); --amber-bg: var(--warn-soft); --red: var(--danger); --red-bg: var(--danger-soft); /* ─────────────── Forma, tipografía y medidas ─────────────── */ /* IBM Plex Sans para interfaz; IBM Plex Mono para números, códigos y dinero. La regla que hace que las columnas se lean: todo número que se compare verticalmente va en mono con tabular-nums. */ --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r-sm: 4px; --r-md: 7px; --r-lg: 12px; --maxw: 1140px; --nav-h: 60px; /* Gráficos. Paleta validada para contraste sobre la superficie y para daltonismo (protan / deutan / tritan). Se asignan en orden fijo por entidad, nunca por posición. */ --chart-1: #3068B4; /* materiales */ --chart-2: #C07A12; /* mano de obra */ --chart-3: #008C7E; /* subcontratos */ color-scheme: light; } /* ─────────────── Oscuro por preferencia del sistema ─────────────── Guardado con :not([data-theme="light"]) para que una elección explícita de claro le gane a un sistema oscuro. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--stone-950); --panel: #1B1A18; --panel2: #201F1D; --line: #2A2926; --line2: #3A3834; --text: #EFEDE9; --text2: #A9A49D; --text3: #78736C; --accent: var(--petrol-300); --accent-h: #9CC6D4; --accent-soft: #182931; --accent-ink: var(--petrol-900); --sel: #19282F; --warn: var(--amber-300); --warn-soft: #262016; --ok: var(--green-300); --ok-soft: #16241C; --danger: var(--red-300); --danger-soft: #271614; --dark: #0F0E0D; --dark2: #1B1A18; --chart-1: #4E8BCB; --chart-2: #B88024; --chart-3: #128F80; color-scheme: dark; } } /* ─────────────── Oscuro por elección explícita ─────────────── */ :root[data-theme="dark"] { --bg: var(--stone-950); --panel: #1B1A18; --panel2: #201F1D; --line: #2A2926; --line2: #3A3834; --text: #EFEDE9; --text2: #A9A49D; --text3: #78736C; --accent: var(--petrol-300); --accent-h: #9CC6D4; --accent-soft: #182931; --accent-ink: var(--petrol-900); --sel: #19282F; --warn: var(--amber-300); --warn-soft: #262016; --ok: var(--green-300); --ok-soft: #16241C; --danger: var(--red-300); --danger-soft: #271614; --dark: #0F0E0D; --dark2: #1B1A18; --chart-1: #4E8BCB; --chart-2: #B88024; --chart-3: #128F80; color-scheme: dark; } /* Números alineados en columna, en cualquier superficie. */ .num, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }