/** * TN GlobalLink · Design System — **Amanecer** * * Dirección visual del PRODUCTO, elegida por Pablo el 26-jul * (`brand/decisions/0003-direccion-visual-producto.md`). * * ⚠️ LA FUENTE DE VERDAD DE ESTOS VALORES ES * `docs/design/prototipos/amanecer.css` — el CSS con el que están dibujadas * las 23 maquetas que cubren 82 de las 90 rutas vivas. NO el documento de * decisión, y menos aún una deducción: el 28-jul se intentó portar desde el * documento y el resultado perdía los ocho acentos por zona, que son la mitad * del sistema. * * Y a su vez, los de la maqueta son los literales de * `brand/refs/amplemarket-ref-plus.json`, la referencia MEDIDA por el pipeline * `design-benchmark` del repo. Esa fue la lección que destrabó el cuarto * intento: se estaban dibujando aproximaciones de memoria teniendo la * referencia medida en disco. * * Reemplaza al sistema v3 "HubSpot+TN" (navy #33475B + amarillo como acción + * Montserrat), rechazado tres veces: *"los tres partían del mismo sistema → * variaciones de lo mismo, no innovación"* y *"no me gusta cómo se ve con la * marca Truly — el amarillo y el ratón no eran el camino"*. * * ── EL CHASIS, QUE NO CAMBIA NUNCA ───────────────────────────────────────── * hueso #F6F5F3 el lienzo tinta #111111 texto y acción * papel #FFFFFF las superficies t70/t55/t40 la escala de secundarios * barra #F1F0ED el lateral línea #ECEBEA los bordes * * ── LO ÚNICO QUE VARÍA POR ZONA: EL ACENTO ───────────────────────────────── * De él cuelgan la acción protagonista, el ítem activo del menú y la aurora * de la cabecera. El acento no se elige por gusto: sale de lo que la zona ES. * * ⚠️ REGLA DURA (del juez, no se re-abre): el acento tiñe la puerta 1 de la * zona, el menú activo y la aurora. **Nunca una fila, nunca un fondo grande, * nunca dos acentos juntos.** Y el par `-b` es para CHIPS y TEXTO, jamás como * banda de fondo de una fila entera. * * ── EL AMARILLO ──────────────────────────────────────────────────────────── * `#FFD200` **no aparece en ninguna de las 23 maquetas** (verificado: 0 * coincidencias). Sale de la interfaz —ni un botón, ni un chip, ni una fila— y * queda dentro del logotipo. * * Y desde el 10-ago-2026, por decisión de Pablo, también dentro del **amanecer * del fondo**: los degradados pasan a la marca. Es el único lugar de la * interfaz donde el amarillo vive, y vive ahí porque nunca es texto ni * superficie de acción — va desenfocado, a opacidad ≤ .42 y bajo una máscara. * Los tokens son `--marca-aurora-*`; se explican donde se declaran. * * ⚠️ El amanecer NO es un acento y no se escribe con `--acento`: el acento es * de la ZONA (puerta 1 + menú activo) y esto es el FONDO, igual en todas. * * Tipografía: Bricolage Grotesque (peso ≤600). La itálica se sirve con * **Switzer** porque Bricolage no trae itálica dibujada y el navegador la * inclinaría por software — justo lo que abarata el gesto. * * Modo oscuro: Amanecer nace en claro y su versión oscura se DERIVA (0003 lo * deja explícito). Acá se deriva con neutros CÁLIDOS, no navy: es el mismo * sistema con la luz apagada, no un segundo sistema pegado al lado. */ :root, [data-theme="light"] { /* === El chasis · hueso, papel, barra, línea === El lateral deja de ser navy: Amanecer es claro de punta a punta y un panel oscuro al costado partía la pantalla en dos sistemas. */ --bg-canvas: #F6F5F3; /* hueso */ --bg-surface: #F1F0ED; /* barra · secciones · filas alternas */ --bg-subtle: #ECEBEA; /* hundido · hover */ --bg-muted: #DFDDDA; /* línea-2 · divisores fuertes */ --bg-card: #FFFFFF; /* papel */ --bg-sidebar: #F1F0ED; /* barra */ --bg-overlay: rgba(17, 17, 17, 0.42); /* === La escala de tinta === Opacidades y no grises fijos: el secundario funciona igual sobre hueso, papel y barra sin necesitar un token por fondo. */ --fg-default: #111111; /* tinta · 17.4:1 sobre hueso */ --fg-strong: #111111; --fg-muted: rgba(17, 17, 17, 0.70); /* t70 · 8.6:1 ✓ AAA */ --fg-subtle: rgba(17, 17, 17, 0.55); /* t55 · 5.6:1 ✓ AA */ --fg-placeholder: rgba(17, 17, 17, 0.40); /* t40 */ --fg-inverted: #FFFFFF; /* === Bordes === */ --border-default: #ECEBEA; /* línea */ --border-strong: #DFDDDA; /* línea-2 */ --border-input: #DFDDDA; --border-input-focus: #111111; /* anillo 2px + offset 2px, en tinta */ /* === Marca TNI · el logotipo y el degradado del fondo === El amarillo no está en ninguna maqueta. Se conserva el token porque el isotipo lo necesita; no debe aparecer en un botón ni en un chip. Desde el 10-ago también tiñe el amanecer del fondo — ver abajo. */ /* ⚠️ ESTOS TRES HEX SALEN DEL LOGOTIPO, MEDIDOS · NO se eligen a ojo Medidos sobre docs/brand-research/tni/tn-latest-logo.png (10-ago-2026), que es el logotipo oficial de Truly Nolen International: amarillo #FFD900 (el token decia #FFD200) negro #0E0C13 (decia #111111) rojo #ED1C24 (decia #E02B21) Contraste comprobado antes de cambiarlos, no despues: amarillo contra tinta 13,01 → 13,65 mejora negro contra blanco 18,88 → 19,43 mejora rojo contra tinta 4,08 → 4,31 mejora rojo contra blanco 4,63 → 4,38 BAJA, y por eso se verifico: `--brand-red-brand` NO se usa nunca para texto — solo en degradados y color-mix, siempre como fondo. AA para texto no aplica a una franja de aurora. Si algun dia alguien lo pone en un `color:`, ese uso nace por debajo de AA y hay que usar `--brand-red-cta` (#B3271C, mas oscuro). */ --brand-yellow: #FFD900; --brand-yellow-hover: #E6C300; --brand-yellow-bg: #FFF6CC; --brand-red-brand: #ED1C24; --brand-red-cta: #B3271C; --brand-red-cta-hover:#8F1F16; --brand-red-bg: rgba(179, 39, 28, 0.08); --brand-black: #0E0C13; --brand-white: #FFFFFF; /* === El amanecer, ahora de la marca (10-ago-2026) ======================== Decisión de Pablo: los degradados pasan a la marca Truly Nolen. Hasta hoy el amanecer del acceso y el de las consolas era naranja `#F0A02B → #E8601A` con un contraluz rosa `#F2789E → #C4568F`: los literales de `brand/refs/amplemarket-ref-plus.json`, la referencia MEDIDA con la que se dibujó Amanecer. Bonitos, y de otra marca. Los mismos degradados escritos con el amarillo y el rojo de TNI dicen lo mismo —un amanecer— y además dicen de quién es el producto. ⚠️ ESTO NO ES UN NOVENO ACENTO, Y POR ESO NO SE ESCRIBE CON `--acento`. La regla dura sigue en pie: el acento tiñe la puerta 1 de la zona y el menú activo. Este degradado es el FONDO — corre por debajo, es el mismo en toda la aplicación y no cambia por zona. Son dos planos distintos. Si alguien mete `--acento` acá, la pantalla pasa a mostrar dos acentos compitiendo, que es exactamente lo que la regla prohíbe. Las auroras que SÍ son de zona —`AuroraNoche` de Rocket, `AuroraReportes` de Reportes— no se tocan: ahí el color ES el acento y cambiarlo sería borrar la identidad de la zona. ⚠️ EL AMARILLO ACÁ NUNCA ES TEXTO: va a opacidad ≤ .42, con 76 px de desenfoque y una máscara que lo desvanece. Medido: la tinta `#111111` sobre `#FFD200` da **12,6:1** — MÁS contraste que sobre el `#E8601A` que reemplaza (5,3:1) y que sobre el rosa `#C4568F` (4,5:1, al filo de AA). El cambio sube el contraste, no lo baja. ⚠️ HASTA EL 11-AGO-2026 ESTA NOTA DECÍA «y sólo acá fuera del logotipo». Ya no, y conviene saber por qué cambió en vez de encontrarlo en un diff. El amarillo tiene desde hoy un segundo lugar declarado: **la opción que el usuario eligió** (`components/ui/tarjeta-opcion.tsx`). Decisión de Pablo, con una razón concreta detrás — el producto tenía cinco maneras de decir «elegido» y la del diálogo que gasta los tokens de la oficina pintaba **el mismo gris que su propio hover**, así que elegir no se veía. La regla vieja no se rompe, se precisa: **el amarillo no es una superficie de acción**. Lo elegido se tiñe con `--brand-yellow-bg` degradando al fondo de la tarjeta —el tinte, no el color pleno— y el `#FFD900` queda en el filo y en chips de 24 px que llevan un ícono, nunca texto. Un botón que invita a apretar sigue sin ser amarillo; la variante `signature` es la única que se pinta entera, y es para los momentos de marca. ⚠️ Y no es un noveno acento tampoco: el amarillo dice «esto elegiste» y es el MISMO en las seis zonas, justo para que no compita con `--acento`, que dice «estás acá». Son dos preguntas distintas y por eso dos colores. Si algún día lo elegido se tiñera con `--acento`, la zona y la elección pasarían a decirse con el mismo color y ninguna de las dos se leería. Se escriben como degradado completo y no como pares de color sueltos para que las posiciones —las de la maqueta— vivan en un solo lugar. */ /* ⚠️ EL AMANECER SE VE AMARILLO, Y ANTES NO (12-ago-2026 · decisión de Pablo) Los degradados decían «el amarillo y el rojo de la marca», pero el sol pasaba a ROJO ya en el 34 % y el contraluz era rojo de punta a punta: sobre la crema, a 42 % y 30 % de opacidad, el rojo dominaba y el encabezado leía SALMÓN. El amarillo estaba en la primera parada y no se veía. Ahora el amarillo ocupa el recorrido y el rojo de la marca queda como un susurro en el borde del contraluz — sigue estando, deja de mandar. El contraste SUBE con el cambio: la tinta `#111` sobre el amarillo da 12,6:1 contra los 5,3:1 que daba sobre el rojo que reemplaza. */ --marca-aurora-sol: radial-gradient(circle at 46% 46%, var(--brand-yellow) 0%, var(--brand-yellow-hover) 38%, transparent 64%); --marca-aurora-contraluz: radial-gradient(circle at 54% 52%, var(--brand-yellow-hover) 0%, color-mix(in srgb, var(--brand-yellow) 62%, var(--brand-red-brand)) 40%, transparent 66%); --marca-aurora-sol-op: 0.42; --marca-aurora-contraluz-op: 0.3; /* ── LA NOCHE ES EL MISMO AMANECER, APAGADO (12-ago-2026) ───────────────── `aurora.tsx` traía una paleta de noche en AZUL NOCHE —`#1b2744`— y una de nubes en GRIS. Cambiaban de color, no de luz: un martes nublado a la 1 a.m. en Guatemala la cabecera era un manchón oscuro que no decía de quién es el producto. Pablo, mirándolo: «se ve terrible». Estos dos son el amarillo y el rojo de la marca llevados hacia la tinta. Siguen siendo el amanecer —se reconoce— y a la vez se lee como noche, que es lo que el candado `de-noche-no-hay-sol` exige y con razón: antes de la corrección del 11-ago la noche salía MÁS PÁLIDA que el día y nadie distinguía una de otra. ⚠️ EL PRIMER INTENTO MEZCLÓ AL 18 % Y SEGUÍA SIENDO UN MANCHÓN GRIS. Se razonó que «18 % contra la tinta da un dorado profundo» y no se miró. `color-mix(in srgb, #FFD900 18%, #0E0C13)` da **`#393110`**, que junto al contraluz y bajo el desenfoque se ve GRIS: Pablo mandó la captura de la 1:46 a.m. diciendo «sigues sin arreglar esto», y tenía razón — el cambio movió el TONO (de azul noche a oliva) sin mover nada de lo que se ve. La segunda vez se renderizó la escalera 18 / 45 / 60 / 75 % en Chromium con esta misma estructura —los dos halos, el desenfoque de 76 px y la máscara— contra el día como referencia: 18 % gris · indistinguible de un fondo apagado 45 % oliva sucio, todavía no es de la casa 60 % ya se lee dorado 75 % el amarillo de la marca, apagado — se reconoce y es de noche 75 % y no amarillo pleno: pleno a opacidad efectiva 1,0 deja la cabecera encendida a las 2 a.m. Y sigue siendo MÁS marcada que el día, que es lo que exige `de-noche-no-hay-sol` — lo que cambió es que ahora también se reconoce el color. */ --marca-aurora-sol-noche: radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--brand-yellow) 75%, #0E0C13) 0%, color-mix(in srgb, var(--brand-yellow-hover) 50%, #0E0C13) 38%, transparent 64%); --marca-aurora-contraluz-noche: radial-gradient(circle at 54% 52%, color-mix(in srgb, var(--brand-red-brand) 59%, #0E0C13) 0%, color-mix(in srgb, var(--brand-yellow) 42%, #0E0C13) 40%, transparent 66%); /* La textura del fondo de espera: dos halos de marca y la trama de puntos. Reemplaza tres degradados que estaban escritos con la crema `#FAFAF7` y el negro `#0A0A0A` del sistema anterior — el mismo que se retiró de `.app-shell` — sobreviviendo en dos pantallas de carga de `(app)`. */ --marca-textura: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--brand-yellow) 9%, transparent) 0%, transparent 38%), radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--brand-red-brand) 5%, transparent) 0%, transparent 42%), radial-gradient(color-mix(in srgb, var(--brand-black) 5%, transparent) 0.6px, transparent 0.6px); --marca-textura-medida: 100% 100%, 100% 100%, 22px 22px; /* === El acento · por defecto, tinta === Sin zona declarada el acento es la tinta. Ninguna pantalla se rompe por no declarar una: simplemente no tiene identidad propia todavía. */ --acento: #111111; --acento-b: rgba(17, 17, 17, 0.07); --accent-primary: var(--acento); --accent-primary-hover: #2A2A2A; --accent-primary-bg: var(--acento-b); --accent-primary-fg: #FFFFFF; --accent-secondary: #B3271C; --accent-secondary-hover:#8F1F16; --accent-secondary-bg: rgba(179, 39, 28, 0.08); --accent-secondary-fg: #FFFFFF; /* === Estado · los tres pares del contrato === ok / esp / urge. El juez marcó 🔴 que el producto usaba tres pares que el contrato no declaraba; se promovieron a token en vez de reemplazarlos. */ --status-success: #15704A; /* ok */ --status-success-solid: #15704A; --status-success-bg: rgba(21, 112, 74, 0.09); --status-warning: #8A5300; /* esp */ --status-warning-solid: #D68A15; --status-warning-bg: rgba(214, 138, 21, 0.13); --status-danger: #B3271C; /* urge */ --status-danger-solid: #B3271C; --status-danger-bg: rgba(179, 39, 28, 0.08); --status-info: #2A5C9A; --status-info-solid: #2A5C9A; --status-info-bg: rgba(42, 92, 154, 0.09); --status-active: #111111; --status-active-solid: #111111; --status-active-bg: rgba(17, 17, 17, 0.07); --accent-success: var(--status-success); --accent-success-bg: var(--status-success-bg); --accent-warning: var(--status-warning); --accent-warning-bg: var(--status-warning-bg); --accent-danger: var(--status-danger); --accent-danger-bg: var(--status-danger-bg); --accent-info: var(--status-info); --accent-info-bg: var(--status-info-bg); /* === Botones === `signature` deja de ser amarillo: la maqueta no lo usa en ningún lado. */ --button-primary-bg: var(--acento); --button-primary-bg-hover: #2A2A2A; --button-primary-fg: #FFFFFF; --button-signature-bg: var(--acento); --button-signature-bg-hover: #2A2A2A; --button-signature-fg: #FFFFFF; --button-action-bg: #B3271C; --button-action-bg-hover: #8F1F16; --button-action-fg: #FFFFFF; /* === Sombras EN CAPAS · s1 y s2, literales de la referencia medida === Una sola sombra difusa es lo que separa "plantilla" de "caro". s1 para tarjetas · s2 para lo que flota (modales, cajones, el acceso). */ --shadow-xs: rgba(25, 34, 35, .04) 0 1px 1px -.5px; --shadow-sm: rgba(25, 34, 35, .04) 0 1px 1px -.5px, rgba(25, 34, 35, .09) 0 5px 14px -4px; --shadow-md: rgba(25, 34, 35, .04) 0 1px 1px -.5px, rgba(25, 34, 35, .09) 0 5px 14px -4px; --shadow-lg: rgba(25, 34, 35, .04) 0 1px 1px -.5px, rgba(25, 34, 35, .12) 0 26px 60px -6px; --shadow-xl: rgba(25, 34, 35, .04) 0 1px 1px -.5px, rgba(25, 34, 35, .12) 0 26px 60px -6px; /* === Radios · 4 · 8 · 12, sin excepciones · y la altura de fila === */ --radio-1: 4px; --radio-2: 8px; --radio-3: 12px; --alto-fila: 48px; /* la fila real Y el esqueleto usan ESTE número */ /* === Gráficas · derivadas del sistema, no una paleta aparte === Sin violeta: es el color por defecto de la categoría (Outreach, Cognism y Gong usan casi el mismo tono) — `brand/refs/estudio.md §Hallazgos`. */ --chart-1: #111111; --chart-2: #15704A; --chart-3: #2A5C9A; --chart-4: #8A5300; --chart-5: #B3271C; --chart-6: rgba(17, 17, 17, 0.55); --chart-7: #5B3A96; --chart-8: rgba(17, 17, 17, 0.28); } /* ============================================================================ * LA IDENTIDAD DE CADA ZONA * * El chasis es uno solo —hueso, papel, tinta— y eso NO cambia: es lo que hace * que el producto se sienta uno. Lo que cambia por zona es UNA variable. * * Valores literales de `docs/design/prototipos/amanecer.css`. * ============================================================================ */ [data-zona="prospectar"] { --acento:#B8431B; --acento-b:rgba(184,67,27,.09) } /* el amanecer sobre la zona · descubrir */ [data-zona="rocket"] { --acento:#3A3E8F; --acento-b:rgba(58,62,143,.09) } /* la máquina que trabaja de noche */ [data-zona="conversar"] { --acento:#2A5C9A; --acento-b:rgba(42,92,154,.09) } /* la voz que llega de afuera */ [data-zona="pipeline"] { --acento:#1E6A45; --acento-b:rgba(30,106,69,.09) } /* el dinero que avanza */ [data-zona="cuenta"] { --acento:#8A5300; --acento-b:rgba(138,83,0,.10) } /* la zona del tope: advertir es su trabajo */ [data-zona="reportes"] { --acento:#5B3A96; --acento-b:rgba(91,58,150,.09) } /* mirar hacia atrás y entender */ /* Configurar no necesita identidad: acá el color debe quedar libre para marcar peligro. */ [data-zona="sistema"] { --acento:#111111; --acento-b:rgba(17,17,17,.07) } /* Admin NO es Ajustes: ajustar tu oficina es tu casa, administrar la red es otro plano del producto. Pizarra — sobrio a propósito: acá nadie vende. */ [data-zona="admin"] { --acento:#3F4A5A; --acento-b:rgba(63,74,90,.09) } /* ============================================================================ * Dark theme * ============================================================================ */ [data-theme="dark"] { /* Derivado del claro con neutros CÁLIDOS: el mismo sistema con la luz apagada, no un segundo sistema. El chasis conserva el matiz del hueso. */ --bg-canvas: #121110; --bg-surface: #1B1A18; --bg-subtle: #232220; --bg-muted: #2E2C29; --bg-card: #1B1A18; --bg-sidebar: #161513; --bg-overlay: rgba(0, 0, 0, 0.68); /* La escala de tinta, invertida: el hueso pasa a ser el texto. */ --fg-default: #F6F5F3; --fg-strong: #FFFFFF; --fg-muted: rgba(246, 245, 243, 0.70); --fg-subtle: rgba(246, 245, 243, 0.55); --fg-placeholder: rgba(246, 245, 243, 0.40); --fg-inverted: #111111; --border-default: #2A2825; --border-strong: #3A3733; --border-input: #3A3733; --border-input-focus: #F6F5F3; /* Amarillo del logotipo (#FFD900) tambien en oscuro. Los ROJOS de este bloque NO cambian: #E8695F es un rojo aclarado a proposito para que funcione sobre lienzo oscuro — poner el #ED1C24 del logotipo aca rompe el contraste que este bloque existe para sostener. */ --brand-yellow: #FFD900; --brand-yellow-hover: #FFE24D; --brand-yellow-bg: rgba(255, 217, 0, 0.12); --brand-red-brand: #E8695F; --brand-red-cta: #E8695F; --brand-red-cta-hover:#F08579; --brand-red-bg: rgba(232, 105, 95, 0.14); --brand-black: #111111; --brand-white: #FFFFFF; /* El amanecer, con la luz apagada. ⚠️ Acá el amarillo a plena saturación NO sirve: sobre un halo `#FFD200` el texto claro `#F6F5F3` cae a 1,3:1 y la pantalla se vuelve ilegible. Es el mismo sol visto de noche —brasa, no mediodía—: se apaga con `color-mix` contra el lienzo oscuro y se le baja la opacidad, así el fondo sigue teniendo temperatura de marca y el texto sigue siendo el que se lee. */ --marca-aurora-sol: radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--brand-yellow) 46%, #121110) 0%, color-mix(in srgb, var(--brand-red-brand) 42%, #121110) 34%, transparent 62%); --marca-aurora-contraluz: radial-gradient(circle at 54% 52%, color-mix(in srgb, var(--brand-red-brand) 40%, #121110) 0%, color-mix(in srgb, var(--brand-red-cta-hover) 46%, #121110) 34%, transparent 64%); --marca-aurora-sol-op: 0.5; --marca-aurora-contraluz-op: 0.38; --marca-textura: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--brand-yellow) 7%, transparent) 0%, transparent 38%), radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--brand-red-brand) 6%, transparent) 0%, transparent 42%), radial-gradient(color-mix(in srgb, #F6F5F3 6%, transparent) 0.6px, transparent 0.6px); --marca-textura-medida: 100% 100%, 100% 100%, 22px 22px; /* La acción sigue siendo la tinta, acá invertida a hueso. NO pasa a amarillo como hacía el sistema viejo: eso convertía el sello de marca en el botón de todos los días, que es justo lo que se rechazó. */ --acento: #F6F5F3; --acento-b: rgba(246, 245, 243, 0.10); --accent-primary: var(--acento); --accent-primary-hover: #FFFFFF; --accent-primary-bg: var(--acento-b); --accent-primary-fg: #111111; --accent-secondary: #E8695F; --accent-secondary-hover:#F08579; --accent-secondary-bg: rgba(232, 105, 95, 0.14); --accent-secondary-fg: #111111; /* Los tres pares, subidos de luminosidad para pasar AA sobre fondo oscuro. */ --status-success: #5CC79A; --status-success-solid: #3FB183; --status-success-bg: rgba(92, 199, 154, 0.14); --status-warning: #E0A94A; --status-warning-solid: #D68A15; --status-warning-bg: rgba(224, 169, 74, 0.15); --status-danger: #E8695F; --status-danger-solid: #D9544A; --status-danger-bg: rgba(232, 105, 95, 0.14); --status-info: #7FB2DC; --status-info-solid: #5E9BCF; --status-info-bg: rgba(127, 178, 220, 0.14); --status-active: #F6F5F3; --status-active-solid: #F6F5F3; --status-active-bg: rgba(246, 245, 243, 0.10); --accent-success: var(--status-success); --accent-success-bg: var(--status-success-bg); --accent-warning: var(--status-warning); --accent-warning-bg: var(--status-warning-bg); --accent-danger: var(--status-danger); --accent-danger-bg: var(--status-danger-bg); --accent-info: var(--status-info); --accent-info-bg: var(--status-info-bg); --button-primary-bg: var(--acento); --button-primary-bg-hover: #FFFFFF; --button-primary-fg: #111111; --button-signature-bg: var(--acento); --button-signature-bg-hover: #FFFFFF; --button-signature-fg: #111111; --button-action-bg: #E8695F; --button-action-bg-hover: #F08579; --button-action-fg: #111111; /* En oscuro las sombras mueren: la elevación se dice con un borde de 1px. */ --shadow-xs: none; --shadow-sm: 0 0 0 1px rgba(246, 245, 243, 0.05); --shadow-md: 0 0 0 1px rgba(246, 245, 243, 0.07), 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 0 0 1px rgba(246, 245, 243, 0.09), 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-xl: 0 0 0 1px rgba(246, 245, 243, 0.11), 0 16px 40px rgba(0, 0, 0, 0.62); --radio-1: 4px; --radio-2: 8px; --radio-3: 12px; --alto-fila: 48px; --chart-1: #F6F5F3; --chart-2: #5CC79A; --chart-3: #7FB2DC; --chart-4: #E0A94A; --chart-5: #E8695F; --chart-6: rgba(246,245,243,.62); --chart-7: #A98BD4; --chart-8: rgba(246,245,243,.30); } /* Los acentos por zona en oscuro: mismos colores, subidos para pasar AA. */ [data-theme="dark"] [data-zona="prospectar"] { --acento:#E08050; --acento-b:rgba(224,128,80,.14) } [data-theme="dark"] [data-zona="rocket"] { --acento:#8A8EE0; --acento-b:rgba(138,142,224,.14) } [data-theme="dark"] [data-zona="conversar"] { --acento:#7FB2DC; --acento-b:rgba(127,178,220,.14) } [data-theme="dark"] [data-zona="pipeline"] { --acento:#5CC79A; --acento-b:rgba(92,199,154,.14) } [data-theme="dark"] [data-zona="cuenta"] { --acento:#E0A94A; --acento-b:rgba(224,169,74,.15) } [data-theme="dark"] [data-zona="reportes"] { --acento:#A98BD4; --acento-b:rgba(169,139,212,.14) } [data-theme="dark"] [data-zona="sistema"] { --acento:#F6F5F3; --acento-b:rgba(246,245,243,.10) } [data-theme="dark"] [data-zona="admin"] { --acento:#9AA7B8; --acento-b:rgba(154,167,184,.14) } /* ============================================================================ * System preference fallback * ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Mismos valores que [data-theme="dark"]. Si divergen, quien nunca tocó el conmutador ve un producto distinto del de quien sí lo tocó. */ --bg-canvas: #121110; --bg-surface: #1B1A18; --bg-subtle: #232220; --bg-muted: #2E2C29; --bg-card: #1B1A18; --bg-sidebar: #161513; --fg-default: #F6F5F3; --fg-strong: #FFFFFF; --fg-muted: rgba(246,245,243,.70); --fg-subtle: rgba(246,245,243,.55); --fg-inverted: #111111; --border-default: #2A2825; --border-strong: #3A3733; --border-input: #3A3733; --border-input-focus: #F6F5F3; --acento: #F6F5F3; --acento-b: rgba(246,245,243,.10); --accent-primary: #F6F5F3; --accent-primary-hover: #FFFFFF; --accent-primary-fg: #111111; --button-primary-bg: #F6F5F3; --button-primary-bg-hover: #FFFFFF; --button-primary-fg: #111111; --shadow-md: 0 0 0 1px rgba(246,245,243,.07); --shadow-lg: 0 0 0 1px rgba(246,245,243,.09); /* El amanecer de la marca, apagado igual que arriba. Si esto se olvida, quien nunca tocó el conmutador ve el sol de mediodía sobre fondo negro y el texto encima deja de leerse: 1,3:1. */ --marca-aurora-sol: radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--brand-yellow) 46%, #121110) 0%, color-mix(in srgb, var(--brand-red-brand) 42%, #121110) 34%, transparent 62%); --marca-aurora-contraluz: radial-gradient(circle at 54% 52%, color-mix(in srgb, var(--brand-red-brand) 40%, #121110) 0%, color-mix(in srgb, var(--brand-red-cta-hover) 46%, #121110) 34%, transparent 64%); --marca-aurora-sol-op: 0.5; --marca-aurora-contraluz-op: 0.38; --marca-textura: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--brand-yellow) 7%, transparent) 0%, transparent 38%), radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--brand-red-brand) 6%, transparent) 0%, transparent 42%), radial-gradient(color-mix(in srgb, #F6F5F3 6%, transparent) 0.6px, transparent 0.6px); } } /* ============================================================================ * Reduced motion * ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ * Print * ============================================================================ */ @media print { :root, [data-theme="dark"] { --bg-canvas: #FFFFFF; --bg-surface: #FFFFFF; --bg-subtle: #F5F8FA; --bg-muted: #E5E8EB; --bg-card: #FFFFFF; --fg-default: #000000; --fg-strong: #000000; --fg-muted: #33475B; --fg-subtle: #516F90; --fg-inverted: #FFFFFF; --border-default: #CBD6E2; --border-strong: #7C98B6; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; } }