/* Mercadex - tokens de diseno (docs/spec/30-sistema-diseno.md §2). Unico archivo que declara colores, tamanos y radios en crudo. Los demas CSS usan siempre var(--...). No tocar sin actualizar el doc 30. El tema por defecto es CLARO. El oscuro queda completo en :root[data-theme="dark"], listo para encenderse poniendo ese atributo en ; el selector para el usuario final todavia no existe (fuera de alcance), pero la base si. */ /* Tipografias propias (decision de Angel, 24 sept 2026): Instrument Sans para el texto y JetBrains Mono para los numeros, las dos con licencia SIL OFL 1.1 (licencias en /fonts/). Se sirven desde mercadex.app, NO desde Google Fonts: ningun tercero recibe la IP del visitante y no hay nada que declarar en Privacidad. Recortadas a latin (ASCII + Latin-1 + guiones, comillas, menos y euro) con fontTools: 28 KB + 20 KB. Instrument Sans es variable (peso 400-700; la interfaz usa 400/500/600); JetBrains Mono va en un solo peso (500) porque solo pinta numeros. font-display: swap -> el texto se ve con la pila del sistema mientras llega la fuente, nunca en blanco. */ @font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { color-scheme: light; /* Fondos y superficies. Llevan un tinte morado muy tenue para que acompanen a la marca en vez de verse gris neutro; siguen siendo casi blancos para no cansar la vista. */ /* El tinte propuesto (#f8f7fc / #f4f2fb / #ebe7f7) es algo mas oscuro que el gris que reemplaza y dejaba seis pares de color entre 4.42 y 4.49, por debajo de AA. Estos son los mismos tonos aclarados un 15 % hacia blanco: el morado se sigue notando y todo vuelve a 4.55 o mas, sin tocar los tokens de texto ni los semanticos. */ --bg: #f9f8fc; --surface: #ffffff; --surface-2: #f6f4fc; --surface-3: #eeebf8; --overlay: rgba(15, 17, 21, 0.45); /* Bordes (mismo tinte morado) */ --border: #e5e1f3; /* #c9c2e6 daba 1.70 contra la tarjeta blanca, y WCAG 1.4.11 pide 3.0 para el limite de un control. Lo usan el borde de un campo al pasar el raton, la zona de soltar archivos y el borde punteado de una grafica vacia: es informacion, no decoracion. Medido el 22 sept 2026 al construir el selector de paletas; el fallo ya existia en las paginas publicas, que no llevan data-bg. */ --border-strong: #878d9c; /* Texto */ --text: #16181d; --text-dim: #5b6472; /* #79818f (el tono propuesto) daba 3.56-3.93 sobre los fondos claros y axe lo marcaba como violacion seria de contraste en 92 elementos de 12 pantallas; este pasa AA (4.53 en el peor). */ --text-muted: #636b7a; /* Un paso entre --text-dim y --text, para el cuerpo de una tarjeta que necesita leerse con mas presencia que --text-dim solo, sin llegar al peso del titulo (Sugerencias, 25 sept 2026: Angel midio en un monitor de 1920 sin alta densidad que las descripciones en peso 400 y --text-dim se leian lavadas y delgadas aunque el contraste diera 7,90 -- el problema era la combinacion peso+color, no el contraste). Se deriva de los dos tokens con color-mix(), como --border-soft, para adaptarse sola a las 43 combinaciones sin escribir un tono a mano por paleta. */ --text-strong: color-mix(in srgb, var(--text) 40%, var(--text-dim)); --text-on-accent: #ffffff; --text-on-light: #16181d; /* Marca / acento: morado tecnologico. Cambiar SOLO estas siete cambia toda la paleta. Verde: --brand:#17936a; --accent:#0f7a56; --accent-hover:#0c6849; --accent-active:#0a5a3f; --accent-text:#0b6b4b; --accent-soft:rgba(15,122,86,.10); --focus:#0f7a56; Grafito: --brand:#3a4150; --accent:#232a36; --accent-hover:#1a202a; --accent-active:#11151c; --accent-text:#2b3342; --accent-soft:rgba(35,42,54,.08); --focus:#232a36; */ --brand: #6d5ae0; /* solo decorativo: wordmark, iconos grandes, bordes */ --accent: #5a45c9; /* fondo de boton primario */ --accent-hover: #4e3ab3; --accent-active: #43309c; --accent-text: #5433c2; /* enlaces y texto morado */ --accent-soft: rgba(90, 69, 201, 0.10); --focus: #5a45c9; /* Semanticos. Los badges pintan el color sobre su propio `-soft`, asi que el fondo efectivo se tine del mismo tono y el contraste real es menor que contra --surface. Con los valores propuestos (#0f7a56, #9a6508, #1a6fc4, #c0392f) axe marcaba los badges entre 3.63 y 4.26; estos tonos, un 10 % mas oscuros y practicamente iguales a la vista, quedan todos en 4.50 o mas. */ --success: #0d6d4d; --success-soft: rgba(15, 122, 86, 0.12); --warning: #845707; --warning-soft: rgba(154, 101, 8, 0.12); --danger: #ad332a; --danger-soft: rgba(192, 57, 47, 0.10); --danger-solid: #b3271d; --info: #1761ab; --info-soft: rgba(26, 111, 196, 0.12); --neutral: #58616f; --neutral-soft: rgba(91, 100, 114, 0.12); /* Graficas */ --chart-1: #5a45c9; --chart-2: #0f7a56; --chart-3: #9a6508; --chart-4: #1a6fc4; --chart-compare: #6f7889; /* #8a93a3 se quedaba en 2.55 contra --surface (minimo 3.0) */ --chart-grid: #e2e6ed; /* Brillo que recorre los esqueletos de carga: oscuro sobre fondo claro (en el tema oscuro se invierte a blanco). Si fuera blanco fijo, en tema claro la animacion no se veria. */ --skeleton-shine: rgba(16, 24, 40, 0.07); /* Sombras (sobre fondo claro: mas suaves y frias que en oscuro). El panel NO usa sombra en su superficie de trabajo (tarjetas, barras); solo menus, dialogos y avisos, con una sola sombra corta y un borde de 1 px. */ --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 4px 12px rgba(16,24,40,.08); --shadow-lg: 0 12px 32px rgba(16,24,40,.14); /* Tipografia: Instrument Sans (texto) y JetBrains Mono (numeros), alojadas por nosotros en /fonts/ (ver los @font-face de arriba). La pila del sistema queda detras por si la fuente tarda o falla. */ --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Tres tamanos de trabajo en el panel (PR 0 de diseno, 24 sept 2026): --fs-sm (14, texto de interfaz y metadatos), --fs-md (15, lectura, cuerpo) y --fs-title (20, titulo de pagina). Los numeros de metrica van en --fs-metric (24). El 12 (--fs-xs) queda SOLO para insignias y contadores. Los tokens viejos se conservan: los usan las paginas publicas (portada, login, legales), que no cambian de escala. */ --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-title: 1.25rem; --fs-metric: 1.5625rem; /* Escala de la maqueta de referencia (24 sept 2026, Angel): rotulos en MAYUSCULAS con espaciado / todo el texto / numeros y titulo de la pantalla. Nacio 11 / 13 / 23 y el mismo dia subio a 12 / 15 / 25 (+15 %): Angel la midio en un monitor de 1920 px a densidad 1, donde 13 px es fisicamente chico y delgado (Linear, Stripe y Vercel se ven en pantallas de alta densidad, donde si queda nitido). Se aplica en Inicio, Sugerencias, Resultados, Calendario y en el armazon (menu lateral, barra superior). --fs-metric va igual que --fs-num para que los KPI de todas las pantallas midan lo mismo. */ --fs-label: 0.75rem; --fs-ui: 0.9375rem; --fs-num: 1.5625rem; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Espaciado (base 4 px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --gutter: 16px; --gutter-desktop: 32px; /* 1440 desde el 24 sept 2026 (antes 1200): en un monitor de 1920 sobraban mas de 600 px a los lados y el panel se veia desocupado. Un panel de trabajo usa el ancho; no es un articulo para leer. */ --content-max: 1440px; --page-max: 1080px; --form-max: 720px; --auth-max: 420px; /* Radios */ /* Radios pequenos (PR 0 de diseno): 8 px en tarjetas y dialogos, 6 en controles, 4 en lo chico. Un radio de 14 le daba al panel aire de app de consumo; los paneles de referencia (Linear, Stripe, Vercel) usan 6-8. */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-full: 999px; /* Barra de acciones fija al pie de los formularios largos (components.css .form-actions-bar). El fondo es SOLIDO a proposito: una barra que flota sobre contenido es justo donde un fondo semitransparente se ve bien en una paleta y se rompe en otra. Apunta a --surface, que ya esta medido contra todos los textos en las 12 combinaciones; scripts/medir-contraste.mjs mide ademas estos dos tokens por su nombre, para que nadie los cambie a un rgba() sin que una prueba lo vea. */ --sticky-bar-bg: var(--surface); --sticky-bar-border: var(--border-strong); /* ---- Idioma de luz del panel (maqueta de referencia de Inicio, 24 sept 2026) ---- TODO sale del acento y de los neutros de la paleta con color-mix(): ni un color escrito a mano. Si el usuario cambia la paleta a verde, el resplandor, las rayitas, el relleno de las graficas y el latido se vuelven verdes solos. Las cantidades (%) cambian entre fondo claro y oscuro (bloques de abajo). */ --glow-amount: 20%; --glow-2-amount: 13%; --accent-line-amount: 28%; --accent-glow-amount: 22%; --tint-amount: 4.5%; --bg-glow: color-mix(in srgb, var(--accent) var(--glow-amount), transparent); /* luz principal, del acento */ --bg-glow-2: color-mix(in srgb, var(--info) var(--glow-2-amount), transparent); /* segunda luz, azulada fria */ --accent-line: color-mix(in srgb, var(--accent) var(--accent-line-amount), transparent); /* hilos y bordes de acento */ --accent-glow: color-mix(in srgb, var(--accent) var(--accent-glow-amount), transparent); /* halo del boton primario */ --tint: color-mix(in srgb, var(--accent) var(--tint-amount), transparent); /* tinte de las tarjetas de metrica */ --edge: rgba(255, 255, 255, .9); /* linea de luz interior arriba de cada tarjeta */ --border-soft: color-mix(in srgb, var(--border) 55%, var(--surface)); /* separadores dentro de una tarjeta */ --topbar-bg: color-mix(in srgb, var(--surface) 78%, transparent); /* barra superior translucida (con blur) */ /* Las rayitas: una barra de 2 px con degradado vertical. Acento = lo importante; verde = lo que el sistema hizo solo y completo. Lo apagado no lleva ninguna. */ --rayita-accent: linear-gradient(to bottom, transparent, var(--accent), transparent); --rayita-success: linear-gradient(to bottom, transparent, var(--success), transparent); /* Anillo de foco: se arma con --surface y --focus, asi que sigue al tema solo. */ --ring-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); /* Tamanos, capas, movimiento */ --sidebar-w: 248px; --topbar-h: 60px; /* Area segura del telefono (23 sept 2026). Valen 0 en cualquier pantalla normal; solo suman algo en un telefono con muesca o barra gestual, y solo porque la meta viewport lleva viewport-fit=cover (sin eso el navegador reporta 0 y el contenido no llega a los bordes). El armazon (topbar, sidebar, main, barras pegadas, toasts, drawers) suma estas variables en vez de repetir env() por todas partes. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --touch: 44px; --control-h: 40px; --control-h-sm: 32px; --z-sidebar: 30; --z-topbar: 40; --z-dropdown: 50; --z-drawer: 60; --z-modal: 70; --z-toast: 80; /* Movimiento (PR 0 de diseno, 24 sept 2026). Tope de 240 ms en toda la interfaz. --dur-enter es la entrada de menus, dialogos y avisos (140-160 ms); --dur-exit su salida, mas corta. Dos curvas: --ease para cambios de color y --ease-out (empuja al principio) para entradas; nunca ease-in al entrar. --enter-y y --enter-scale son el desplazamiento y la escala de partida de las entradas: con movimiento reducido valen 0 y 1 (solo queda el fundido), ver el bloque de abajo. */ --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 240ms; --dur-enter: 150ms; --dur-exit: 100ms; --ease: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(.23,1,.32,1); --enter-y: 8px; --enter-scale: .98; } /* El texto de interfaz del panel sube a 14 px; las paginas publicas (portada, login, legales) conservan los 13 px de --fs-sm del :root, que usan en pies, notas y errores (revision de Codex del PR 0). */ body.app { --fs-sm: 0.875rem; } /* Tema oscuro: la paleta con la que se diseno el panel, intacta. Solo redefine color; todo lo demas (tipografia, espaciado, radios, tamanos, capas, movimiento) se hereda del :root de arriba. Se activa con . */ :root[data-theme="dark"] { color-scheme: dark; --glow-amount: 34%; --glow-2-amount: 16%; --accent-line-amount: 36%; --accent-glow-amount: 30%; --tint-amount: 6%; --edge: rgba(255, 255, 255, .055); --topbar-bg: color-mix(in srgb, var(--surface) 72%, transparent); --bg: #0f1115; --surface: #171a21; --surface-2: #1f2330; --surface-3: #262b3a; --overlay: rgba(5, 6, 10, 0.72); --border: #2a2f3d; --border-strong: #454c60; --text: #eef0f4; --text-dim: #9aa1b2; --text-muted: #848c9c; --text-on-accent: #ffffff; --text-on-light: #0f1115; --brand: #7c5cff; --accent: #6246e0; --accent-hover: #5b3fd6; --accent-active: #4f36c0; --accent-text: #a78bfa; --accent-soft: rgba(124, 92, 255, 0.16); --focus: #a78bfa; --success: #33d6a6; --success-soft: rgba(51, 214, 166, 0.14); --warning: #f5b84e; --warning-soft: rgba(245, 184, 78, 0.14); --danger: #ff7b7b; --danger-soft: rgba(255, 123, 123, 0.14); --danger-solid: #c93c3c; --info: #6cb8ff; --info-soft: rgba(108, 184, 255, 0.14); --neutral: #9aa1b2; --neutral-soft: rgba(154, 161, 178, 0.14); --chart-1: #7f61ee; --chart-2: #22a884; --chart-3: #c4861c; --chart-4: #3a8fe0; --chart-compare: #6b7385; --chart-grid: #2a2f3d; --skeleton-shine: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); } /* Menos movimiento no es cero movimiento: los desplazamientos y escalas se quitan (marean), los fundidos cortos se quedan (ayudan a entender que algo aparecio). Los cambios de color y el menu lateral pasan a instantaneos. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; --dur-enter: 120ms; --dur-exit: 80ms; --enter-y: 0px; --enter-scale: 1; } } /* ================================================================================================== SELECTOR DE PALETAS DEL USUARIO (22 sept 2026) Dos ejes independientes que se combinan: - data-bg manda sobre los neutros: fondos, superficies, bordes, texto, sombras y semanticos. - data-accent manda sobre el color de marca: --brand, --accent y sus estados, enlaces y foco. Sin atributos, el :root de arriba sigue mandando y el sitio se ve exactamente como hoy (= blanco + morado). Eso importa: las paginas publicas no llevan estos atributos. Los valores de acento DEPENDEN de si el fondo es claro u oscuro: un enlace morado que se lee bien sobre blanco desaparece sobre negro. Por eso hay un bloque por acento (fondos claros) y otro por cada par fondo-oscuro + acento. NINGUN color de aqui se eligio a ojo: las 42 combinaciones se miden con `node scripts/medir-contraste.mjs` y la prueba `tests/unit/contraste.test.js` falla si alguno baja de AA. Para agregar un color: ponerlo en FONDOS o ACENTOS de ese script, escribir el bloque, y medir hasta que pase. ================================================================================================== */ /* ---------------------------------------------------------------- fondos claros */ :root[data-bg="blanco"] { color-scheme: light; --bg: #f9f8fc; --surface: #ffffff; --surface-2: #f6f4fc; --surface-3: #eeebf8; --overlay: rgba(15, 17, 21, 0.45); --border: #e5e1f3; --border-strong: #878d9c; --text: #16181d; --text-dim: #5b6472; --text-muted: #636b7a; --text-on-light: #16181d; --chart-grid: #e2e6ed; --chart-compare: #6f7889; --skeleton-shine: rgba(16, 24, 40, 0.07); --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 4px 12px rgba(16,24,40,.08); --shadow-lg: 0 12px 32px rgba(16,24,40,.14); } /* Gris: notoriamente distinto del blanco (antes #eef0f4, que no se distinguia), pero claro y comodo; las tarjetas siguen blancas para que el contenido destaque sobre el fondo. */ :root[data-bg="gris"] { color-scheme: light; --bg: #e1e4ea; --surface: #ffffff; --surface-2: #f2f4f7; --surface-3: #e6e9ee; --overlay: rgba(15, 17, 21, 0.45); --border: #cdd2db; --border-strong: #7f8797; --text: #16181d; --text-dim: #4e5664; --text-muted: #596170; --text-on-light: #16181d; --chart-grid: #d3d8e0; --chart-compare: #6a7384; --skeleton-shine: rgba(16, 24, 40, 0.07); --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 4px 12px rgba(16,24,40,.08); --shadow-lg: 0 12px 32px rgba(16,24,40,.14); } /* Crema: un claro calido tipo arena, alternativa al blanco mas suave para la vista. Los neutros se entibian un poco (texto y bordes con algo de marron) para que no se vean azulados sobre la arena. */ :root[data-bg="crema"] { color-scheme: light; --bg: #f3ecdf; --surface: #fffcf5; --surface-2: #f6f0e4; --surface-3: #ece3d1; --overlay: rgba(30, 24, 12, 0.45); --border: #e3d9c4; --border-strong: #857c69; --text: #1b1915; --text-dim: #59544a; --text-muted: #5f5a4e; --text-on-light: #1b1915; --chart-grid: #e0d7c4; --chart-compare: #6f6a5e; --skeleton-shine: rgba(60, 45, 20, 0.07); --shadow-sm: 0 1px 2px rgba(60,45,20,.06); --shadow-md: 0 4px 12px rgba(60,45,20,.08); --shadow-lg: 0 12px 32px rgba(60,45,20,.14); } /* ---------------------------------------------------------------- fondos oscuros `data-theme="dark"` comparte bloque con `negro` para no romper lo que ya lo usaba. */ :root[data-bg="negro"], :root[data-theme="dark"] { color-scheme: dark; --glow-amount: 34%; --glow-2-amount: 16%; --accent-line-amount: 36%; --accent-glow-amount: 30%; --tint-amount: 6%; --edge: rgba(255, 255, 255, .055); --topbar-bg: color-mix(in srgb, var(--surface) 72%, transparent); --bg: #0f1115; --surface: #171a21; --surface-2: #1f2330; --surface-3: #262b3a; --overlay: rgba(5, 6, 10, 0.72); --border: #2a2f3d; --border-strong: #6e768a; --text: #eef0f4; --text-dim: #9aa1b2; --text-muted: #949cac; --text-on-light: #0f1115; --chart-grid: #2a2f3d; --chart-compare: #98a0b1; --skeleton-shine: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --success: #46dcae; --success-soft: rgba(51, 214, 166, 0.14); --warning: #f5b84e; --warning-soft: rgba(245, 184, 78, 0.14); --danger: #ff8f8f; --danger-soft: rgba(255, 123, 123, 0.14); --danger-solid: #a32b2b; --info: #6cb8ff; --info-soft: rgba(108, 184, 255, 0.14); --neutral: #a6adbd; --neutral-soft: rgba(154, 161, 178, 0.14); --chart-2: #46dcae; --chart-3: #e0a53a; --chart-4: #6cb8ff; } :root[data-bg="azul"] { color-scheme: dark; --glow-amount: 34%; --glow-2-amount: 16%; --accent-line-amount: 36%; --accent-glow-amount: 30%; --tint-amount: 6%; --edge: rgba(255, 255, 255, .055); --topbar-bg: color-mix(in srgb, var(--surface) 72%, transparent); --bg: #0b1220; --surface: #131d31; --surface-2: #1a2540; --surface-3: #22304f; --overlay: rgba(4, 8, 16, 0.72); --border: #27344d; --border-strong: #5b6d90; --text: #eaf1fa; --text-dim: #a2b3cc; --text-muted: #9caec8; --text-on-light: #0b1220; --chart-grid: #27344d; --chart-compare: #9caec8; --skeleton-shine: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --success: #46dcae; --success-soft: rgba(51, 214, 166, 0.14); --warning: #f5b84e; --warning-soft: rgba(245, 184, 78, 0.14); --danger: #ff8f8f; --danger-soft: rgba(255, 123, 123, 0.14); --danger-solid: #a32b2b; --info: #7cc0ff; --info-soft: rgba(108, 184, 255, 0.14); --neutral: #a6b6cc; --neutral-soft: rgba(162, 179, 204, 0.14); --chart-2: #46dcae; --chart-3: #e0a53a; --chart-4: #7cc0ff; } /* Pizarra: oscuro medio, menos duro que el negro puro, para quien quiere tema oscuro sin el contraste extremo. Los semanticos son los del negro; el texto atenuado sube un punto porque las superficies son mas claras. */ :root[data-bg="pizarra"] { color-scheme: dark; --glow-amount: 34%; --glow-2-amount: 16%; --accent-line-amount: 36%; --accent-glow-amount: 30%; --tint-amount: 6%; --edge: rgba(255, 255, 255, .055); --topbar-bg: color-mix(in srgb, var(--surface) 72%, transparent); --bg: #1e2229; --surface: #272c35; --surface-2: #2f3540; --surface-3: #38404d; --overlay: rgba(10, 12, 18, 0.7); --border: #3e4653; --border-strong: #808a9e; --text: #f0f2f5; --text-dim: #aab1bf; --text-muted: #a4acba; --text-on-light: #1e2229; --chart-grid: #3e4653; --chart-compare: #a4acba; --skeleton-shine: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); --success: #4fe0b4; --success-soft: rgba(51, 214, 166, 0.14); --warning: #f7bd58; --warning-soft: rgba(245, 184, 78, 0.14); --danger: #ff9797; --danger-soft: rgba(255, 123, 123, 0.14); --danger-solid: #a32b2b; --info: #7cc0ff; --info-soft: rgba(108, 184, 255, 0.14); --neutral: #adb4c3; --neutral-soft: rgba(154, 161, 178, 0.14); --chart-2: #4fe0b4; --chart-3: #e0a53a; --chart-4: #7cc0ff; } /* ---------------------------------------------------------------- acentos sobre fondo CLARO */ :root[data-accent="morado"] { --brand: #5f4bd4; --accent: #5a45c9; --accent-hover: #4e3ab3; --accent-active: #43309c; --accent-text: #5433c2; --accent-soft: rgba(90, 69, 201, 0.10); --focus: #5a45c9; --text-on-accent: #ffffff; --chart-1: #5a45c9; } :root[data-accent="verde"] { --brand: #0c6b4a; --accent: #0f7a56; --accent-hover: #0c6849; --accent-active: #0a5a3f; --accent-text: #0b6b4b; --accent-soft: rgba(15, 122, 86, 0.10); --focus: #0f7a56; --text-on-accent: #ffffff; --chart-1: #0f7a56; } /* El amarillo es el caso incomodo: un amarillo vivo NO puede ser texto sobre blanco y cumplir AA — sale marron, deja de ser amarillo. La salida es separar los dos papeles: el BOTON se queda amarillo de verdad (--accent) y le pone texto oscuro encima (--text-on-accent), mientras que el TEXTO amarillo (enlaces, wordmark) usa un ambar oscuro que si se lee. No es una concesion estetica: es que un enlace amarillo claro sobre blanco no lo lee nadie. */ :root[data-accent="amarillo"] { --brand: #8a5a00; --accent: #f2b21a; --accent-hover: #d99c07; --accent-active: #bd8804; --accent-text: #8a5a00; --accent-soft: rgba(242, 178, 26, 0.18); --focus: #a06800; --text-on-accent: #16181d; --chart-1: #8a5a00; } /* Azul: el mas pedido en negocios formales (inmobiliaria, servicios, consultoria). Punto de partida de Angel #1655c0; se midio y se dejo. */ :root[data-accent="azul"] { --brand: #1655c0; --accent: #1655c0; --accent-hover: #124aa8; --accent-active: #0f3f90; --accent-text: #1450b8; --accent-soft: rgba(22, 85, 192, 0.10); --focus: #1655c0; --text-on-accent: #ffffff; --chart-1: #1655c0; } /* Grafito: neutro y elegante. Es ADAPTABLE (pedido de Angel): casi negro sobre fondos claros y casi blanco sobre fondos oscuros, porque un grafito fijo desapareceria sobre el fondo negro. Este es el bloque claro; el oscuro esta mas abajo. */ :root[data-accent="grafito"] { --brand: #3a4150; --accent: #232a36; --accent-hover: #1a202a; --accent-active: #11151c; --accent-text: #2b3342; --accent-soft: rgba(35, 42, 54, 0.08); --focus: #232a36; --text-on-accent: #ffffff; --chart-1: #3a4150; } /* Terracota: calido, para comida, restaurantes y tiendas. Punto de partida #c2410c. */ :root[data-accent="terracota"] { --brand: #a3360a; --accent: #c2410c; --accent-hover: #a8380a; --accent-active: #8f2f08; --accent-text: #a3360a; --accent-soft: rgba(194, 65, 12, 0.12); --focus: #c2410c; --text-on-accent: #ffffff; --chart-1: #c2410c; } /* Rosa: para belleza, moda y salones. Punto de partida #b8256f. */ :root[data-accent="rosa"] { --brand: #b8256f; --accent: #b8256f; --accent-hover: #a02061; --accent-active: #881b52; --accent-text: #a82065; --accent-soft: rgba(184, 37, 111, 0.12); --focus: #b8256f; --text-on-accent: #ffffff; --chart-1: #b8256f; } /* ---------------------------------------------------------------- acentos sobre fondo OSCURO */ :root[data-bg="negro"][data-accent="morado"], :root[data-bg="azul"][data-accent="morado"], :root[data-bg="pizarra"][data-accent="morado"], :root[data-theme="dark"][data-accent="morado"] { /* #7c5cff daba 4.34 en el wordmark sobre fondo oscuro (doc 30 §10.2). Este aclarado un 10 % pasa. */ --brand: #8f73ff; --accent: #6246e0; --accent-hover: #5b3fd6; --accent-active: #4f36c0; --accent-text: #a78bfa; --accent-soft: rgba(124, 92, 255, 0.16); --focus: #a78bfa; --text-on-accent: #ffffff; --chart-1: #9b80ff; } /* Pizarra es mas clara que el negro: el morado necesita tintes mas claros para leerse. Misma especificidad que el bloque de arriba; gana por venir despues. */ :root[data-bg="pizarra"][data-accent="morado"] { --brand: #ad9bff; --accent-text: #c3b4ff; --focus: #c3b4ff; --chart-1: #ad9bff; } :root[data-bg="negro"][data-accent="verde"], :root[data-bg="azul"][data-accent="verde"], :root[data-bg="pizarra"][data-accent="verde"] { --brand: #46dcae; --accent: #0f7a56; --accent-hover: #0c6849; --accent-active: #0a5a3f; --accent-text: #5fe3b8; --accent-soft: rgba(70, 220, 174, 0.16); --focus: #5fe3b8; --text-on-accent: #ffffff; --chart-1: #46dcae; } :root[data-bg="negro"][data-accent="amarillo"], :root[data-bg="azul"][data-accent="amarillo"], :root[data-bg="pizarra"][data-accent="amarillo"] { /* Sobre oscuro el amarillo si puede ser amarillo en los dos papeles. */ --brand: #f7c948; --accent: #f2b21a; --accent-hover: #e0a40f; --accent-active: #c68f07; --accent-text: #f7c948; --accent-soft: rgba(247, 201, 72, 0.16); --focus: #f7c948; --text-on-accent: #16181d; --chart-1: #f7c948; } :root[data-bg="negro"][data-accent="azul"], :root[data-bg="azul"][data-accent="azul"], :root[data-bg="pizarra"][data-accent="azul"] { /* El boton mantiene un azul medio con texto blanco; el texto y el wordmark suben a un celeste legible. */ --brand: #7db2ff; --accent: #2a63d0; --accent-hover: #2558bd; --accent-active: #1f4ca6; --accent-text: #8ab8ff; --accent-soft: rgba(125, 178, 255, 0.16); --focus: #8ab8ff; --text-on-accent: #ffffff; --chart-1: #7db2ff; } :root[data-bg="negro"][data-accent="grafito"], :root[data-bg="azul"][data-accent="grafito"], :root[data-bg="pizarra"][data-accent="grafito"] { /* Grafito sobre oscuro = casi blanco: boton claro con texto oscuro encima (como el amarillo). */ --brand: #e6e9ef; --accent: #dfe3ea; --accent-hover: #cdd3dd; --accent-active: #bcc3cf; --accent-text: #dfe3ea; --accent-soft: rgba(223, 227, 234, 0.14); --focus: #dfe3ea; --text-on-accent: #16181d; --chart-1: #c7cdd8; } :root[data-bg="negro"][data-accent="terracota"], :root[data-bg="azul"][data-accent="terracota"], :root[data-bg="pizarra"][data-accent="terracota"] { --brand: #ff9b6a; --accent: #c2410c; --accent-hover: #a8380a; --accent-active: #8f2f08; --accent-text: #ffa477; --accent-soft: rgba(255, 155, 106, 0.16); --focus: #ffa477; --text-on-accent: #ffffff; --chart-1: #ff9b6a; } :root[data-bg="negro"][data-accent="rosa"], :root[data-bg="azul"][data-accent="rosa"], :root[data-bg="pizarra"][data-accent="rosa"] { --brand: #ff8fc4; --accent: #b8256f; --accent-hover: #a02061; --accent-active: #881b52; --accent-text: #ff9dcb; --accent-soft: rgba(255, 143, 196, 0.16); --focus: #ff9dcb; --text-on-accent: #ffffff; --chart-1: #ff8fc4; }