/* ========================================================================== Clixy design tokens — single source of truth for the visual system. PALETA OFICIAL DE CLIXY, aprobada por Santiago el 18-08-2026 tras ver la landing terminada: "Me super encanto esta paleta... definiremos estos colores como nuestra paleta de colores y estilo". La referencia visual es la portada publica. Cualquier rediseno futuro parte de estos valores; no se cambian los tonos base sin decision expresa del dueno. Loaded before every other Clixy stylesheet so `var(--cx-*)` resolves everywhere. Nothing in this file paints anything: it only declares values. Visual changes belong in the stylesheets that consume these tokens. Naming: --cx-[-]. Roles describe INTENT (surface, line, ink, brand), never appearance ("pink", "grey"), so a value can be retuned without renaming every call site. Proportion the system targets: ~70% neutral surfaces, ~20% ink and depth, ~10% brand. Brand colour is the signature, not the stage. ========================================================================== */ :root { /* ---------------------------------------------------------------- SURFACES canvas page background behind everything surface default card / panel background raised pure white, for surfaces stacked on top of a surface sunken table headers, input wells, inset areas canvas-warm landing only; the dashboard uses the calmer neutral canvas because customers spend hours in it. */ /* La escala neutra es ROSA PASTEL, a 345 grados. Historia, porque el error es facil de repetir: primero era marfil calido (36 grados, amarillo ambar) y se veia apagada. Se giro a 13 grados pensando que era rosa, pero 13 grados es SALMON: desaturado al 94% de luz el ojo lo lee como beige, asi que seguia viendose amarilla. El rosa de verdad esta pasado el rojo, en 345. Es el mismo matiz que el rosa polvoriento original (#E7BFCC, 343 grados) pero trece puntos mas claro: pastel en lugar de polvoriento. La saturacion tambien sube, porque la otra mitad de la queja era "parece apagada", y eso no es matiz sino falta de croma. Antes fue porcelana rosada, y antes marfil. Los ocho neutros estaban en 35-37 grados de matiz, que es amarillo ambar puro, y el conjunto se veia apagado y con un velo mostaza. Se giran a 14 grados conservando la luz, de modo que todos los contrastes medidos siguen valiendo (de hecho suben un poco: el rosa es algo mas oscuro que el amarillo a igual claridad). La saturacion baja un punto porque el rosa se percibe mas que el amarillo, y sin ese ajuste el lienzo volveria al rosa saturado que ya se descarto. La escala neutra era marfil calido, no gris. De ella sale la sensacion de crema del lienzo y la de caramelo de las superficies hundidas, sin necesidad de una familia de color aparte. Porcelana fria. Sustituye al marfil calido anterior, que derivo a beige. Un neutro frio deja respirar al rosa en vez de competir con el, y conserva la separacion con las tarjetas blancas. */ /* 19-08, pasada de marca decidida, con autorizacion expresa: "recuperar rosa pastel en superficies importantes". El lienzo baja de luz 96 a 93 y deja de insinuar: es rosa pastel. Las tarjetas blancas pasan de separarse 4 puntos de luz a 7, que es la profundidad que tiene la portada. Contrastes medidos sobre el: tinta 13.6, secundario 5.5, ciruela 7.0, enlaces 4.8, lila 5.0. */ /* 21-08, ZONAS DE MARCA. Medido antes de tocar: el 30,5% de la primera pantalla de Nuevo pedido era blanco puro -las dos tarjetas de trabajo- y el 20% lienzo. Con la superficie a luz relativa 98,4 el ojo no tiene con que comparar y lee "panel blanco" aunque el marco sea rosa. La correccion no es subir el rosa: es dar al rosa una REFERENCIA. La superficie de trabajo baja a 90,4 y el blanco puro se reserva para lo que va encima de ella -los campos-, que es poca area y mucha lectura. Cuatro planos, cada escalon de 9 a 12 puntos de luminancia relativa: chrome 69,3 menu, cabecera y bandas de rotulo lienzo 78,2 el suelo surface 90,4 la superficie de trabajo raised 100,0 lo que se apoya encima: campos y fichas Contrastes sobre surface: tinta 15,0, secundario 6,0, ciruela 7,7, marca-fuerte 5,3, lila 5,5, teal 4,9, oro 4,8. Sobre chrome: tinta 11,7, secundario 4,7, ciruela 6,0; la marca en texto pequeno NO llega (4,13) y por eso los rotulos de banda van en ciruela. */ --cx-canvas: #FFF5F6; --cx-canvas-warm: #FCF2F5; /* Parada final del degradado del lienzo. */ --cx-canvas-end: #FDE9EE; /* Color exacto del arranque del degradado del lienzo. Como ese fondo va con background-attachment: fixed, es siempre el tono del borde superior de la ventana, y sirve para enmascarar la franja que la cabecera fija deja por encima de si misma. */ --cx-canvas-top: #FFFAFA; --cx-surface: #FFFFFF; --cx-surface-raised: #FFFFFF; --cx-surface-sunken: #FDF1F5; /* ------------------------------------------------------------------- LINES Three weights only. Anything that needs a fourth is probably a shadow. */ --cx-line-subtle: #FDF0F4; --cx-line: #F6DDE4; --cx-line-strong: #EFC3CF; /* --------------------------------------------------------------------- INK Tinta fria, acorde con la porcelana. Sobre surface/canvas/sunken: ink 16.3/14.4/13.6:1, ink-soft 6.7/5.9/5.6:1, ink-faint 3.8/3.3/3.1:1. ink-faint solo para estado deshabilitado y metadatos. ink-faint is for disabled state and metadata only — never body copy. */ /* La tinta estaba a 253-257 grados: gris VIOLETA, frio, sobre una escala de superficies que entera esta a 345. Cada texto secundario del sitio discutia en silencio con su fondo; es la mitad de la sensacion de "apagado". Mismos tres escalones de luminosidad, matiz 340: los ratios del comentario de arriba se conservan (caen menos de 0,2). */ --cx-ink: #1F1418; --cx-ink-soft: #6B5A62; --cx-ink-faint: #95848C; --cx-plum: #7A1046; --cx-plum-deep: #4A0A2B; /* ------------------------------------------------------------------ ANCLA El sistema no tenia nada oscuro. Con todo entre luz 69 y 100 el conjunto se lee apagado por falta de recorrido, no por falta de color: el ojo calibra el brillo con los extremos que ve, y no habia extremo bajo. Este es el suelo de la escala. Va en UN dato por pagina -el total a pagar, el saldo- y en nada mas: es un ancla, no una superficie. Blanco encima: 18,0:1. */ --cx-anchor: #2B0A1D; --cx-anchor-soft: #45122C; --cx-anchor-rgb: 43, 10, 29; /* ---------------------------------------------------------------- SHELL El shell estaba en 327 grados de matiz —vino— mientras el lienzo nuevo esta en 345 —rosa—. Eran familias distintas, y por eso el menu se leia como burdeos y no como parte del mismo sistema. Se lleva a 345 y se aclara un escalon: sigue siendo el ancla oscura que da estructura a toda la interfaz, pero ahora es rosa profundo. Por que no un rosa pastel de verdad: medido, a luz 55 ni el blanco ni la tinta llegan a 4,5:1, asi que la franja intermedia es inviable. Y a luz 88 haria falta texto oscuro, con lo que el menu dejaria de ser el ancla y la pagina entera se quedaria sin jerarquia. La zona util es esta. La navegacion vive sobre ciruela profunda y el contenido sobre porcelana: es lo que separa el chrome de los datos y da al producto una silueta propia. No es un modo oscuro: solo la barra lateral. Berry, no casi negro: se subio la luminosidad de .016 a .039 para que el shell conserve identidad sin pesar. Contraste sobre el: texto 10.5:1, rosa palido 6.6:1, oro 5.3:1, activo blanco 11.8:1. El logo actual, que es transparente, mantiene el 100% de sus pixeles por encima de 3:1 y no necesita version alternativa. */ --cx-shell: #6B1140; --cx-shell-deep: #3D0722; /* Un escalon POR ENCIMA del shell. La banda del resumen lo usa para tener presencia sin convertirse en una segunda masa casi negra. */ --cx-shell-raised: #8E1450; --cx-shell-ink: #F7EFF3; --cx-shell-ink-soft: #CBB6C1; --cx-shell-line: rgba(255, 255, 255, .07); /* Variantes claras de los acentos, para cuando viven sobre el shell. */ --cx-accent-light: #BDB7F9; --cx-teal-light: #7FD3E6; /* ------------------------------------------------------------------- BRAND Ajuste del 18-08-2026 a peticion del dueno: "los rojos son muy rojos, busca tantito mas un rosa pastel". La familia se mueve de matiz 336 al 341 —del lado ROJO del rosa al lado rosa— y sube de luz hasta el tope que permite el contraste: brand pasa de luz 50 a 53 y da 4,60:1 con blanco encima, que es el uso mas exigente (texto blanco sobre relleno de marca). No se puede aclarar mas sin incumplir. brand-strong se mantiene deliberadamente mas oscuro: es el que sostiene texto pequeno sobre fondo claro y necesita margen. brand fills: primary CTA, active indicators (4.9:1 with white) brand-strong brand-coloured TEXT and links (6.2:1) — small text needs it brand-soft secondary brand tone, gradient end stop brand-pale decorative, dividers inside brand areas brand-wash selected rows, hover backgrounds, active nav background */ --cx-brand: #DD0E49; --cx-brand-strong: #B80034; --cx-brand-soft: #E31050; --cx-brand-pale: #F8BFCA; --cx-brand-wash: #FFF0F2; /* Un escalon MAS que wash: es el que pinta las bandas de rotulo, que necesitan leerse como banda y no como suciedad. */ --cx-brand-tint: #FDE0E1; /* Rosa intenso de la marca, el que eligio el dueno: #EB809A. Da 2,60 con blanco, asi que NO lleva texto blanco ni marca bordes que tengan que informar. Su sitio es el adorno: filetes, puntas de degradado, fondos de hover, series de grafica. Con tinta encima da 6,90. */ --cx-blush: #EB809A; --cx-blush-rgb: 235, 128, 154; --cx-on-brand: #FFFFFF; /* ------------------------------------------------------------------ ACCENT Periwinkle taken from the Clixy mascot. Exists so that informational and secondary states do not have to borrow the brand colour. Each accent family follows the same three-step contract: text and icons — always AA on a light surface -vivid decorative fills, bars, icon chips — never text -wash tinted backgrounds behind the accent */ --cx-accent: #5B4AE0; --cx-accent-vivid: #8B7BFF; --cx-accent-wash: #EFEBFF; /* -------------------------------------------------------------------- WARM Gold taken from the mascot's rocket flame and the cream of its fur. Carries value and reward: prices, favourites, highlights. Distinct from --cx-warning, which is reserved for the "pending" order state. */ --cx-warm: #96610A; --cx-warm-vivid: #F0A81E; --cx-warm-wash: #FEF4DE; /* -------------------------------------------------------------------- TEAL The coolest member of the family, used to give catalogue and support their own identity. Reads as calm and utilitarian next to the rose, so it separates browsing from buying without competing with the brand. */ --cx-teal: #0A6FC2; --cx-teal-vivid: #2E9FE8; --cx-teal-wash: #E3F1FE; /* --------------------------------------------------------------- SEMANTICS Order states. Deliberately outside the rose family so that "error" can never read as "brand". Destructive actions must never use --cx-brand. */ --cx-success: #0F7A4F; --cx-warning: #A85F06; --cx-danger: #C4231B; --cx-info: #5A51C9; --cx-success-wash: #E7F4EE; --cx-warning-wash: #FBF0E0; --cx-danger-wash: #FBEBE9; --cx-info-wash: #EEEDFB; /* -------------------------------------------------- CHANNELS FOR ALPHA USE Let stylesheets build translucent values without hardcoding the colour: rgba(var(--cx-ink-rgb), .08) */ --cx-ink-rgb: 31, 20, 24; --cx-brand-rgb: 221, 14, 73; --cx-plum-rgb: 122, 16, 70; --cx-accent-rgb: 91, 74, 224; /* Se consumia con valor de reserva y por eso ese borde se quedo en el teal viejo cuando la familia paso a azul. Declarado, ya sigue al token. */ --cx-teal-rgb: 10, 111, 194; /* Canales de las variantes vivas. Existen para poder TINTAR con la familia -rgba(canal, .28)- en vez de rellenar con ella. Un tinte tiñe; un relleno grita. */ --cx-accent-vivid-rgb: 139, 123, 255; --cx-teal-vivid-rgb: 46, 159, 232; --cx-warm-vivid-rgb: 240, 168, 30; --cx-brand-pale-rgb: 248, 191, 202; /* Variante clara del oro, la que faltaba para el glifo sobre tinte. */ --cx-warm-light: #FBD98A; /* ----------------------------------------------------------------- SHADOWS Neutral by default. --cx-shadow-brand is the single coloured shadow in the system and belongs to the primary CTA only. */ --cx-shadow-sm: 0 1px 2px rgba(var(--cx-ink-rgb), .04), 0 4px 14px rgba(var(--cx-plum-rgb), .06); --cx-shadow-md: 0 2px 6px rgba(var(--cx-ink-rgb), .04), 0 14px 38px rgba(var(--cx-plum-rgb), .09); --cx-shadow-lg: 0 6px 14px rgba(var(--cx-ink-rgb), .05), 0 30px 70px rgba(var(--cx-plum-rgb), .14); --cx-shadow-brand: 0 8px 20px rgba(var(--cx-brand-rgb), .22); /* --------------------------------------------------------------- GRADIENTS Derived from the Clixy logo, which runs deep rose to light rose. Accents only: active pills, the primary CTA, hero details. Never a page or card background. */ /* La parada clara era #E36492: el blanco encima daba 3,23:1 y este degradado pinta botones con texto blanco en 18 sitios. Ahora va de brand-strong a brand: la parada MAS CLARA da 4,95:1 con blanco, asi que cualquier texto blanco sobre el degradado cumple AA sin revisar sitio por sitio. */ --cx-grad-brand: linear-gradient(135deg, var(--cx-brand-strong) 0%, var(--cx-brand) 100%); --cx-grad-sheen: linear-gradient(135deg, var(--cx-brand-soft) 0%, var(--cx-brand-pale) 100%); /* ------------------------------------------------------------------ SHAPE */ --cx-r-sm: 8px; --cx-r-md: 12px; --cx-r-lg: 20px; --cx-r-pill: 999px; /* ------------------------------------------------------------------ FOCUS One focus treatment across the whole product. */ --cx-focus-ring: 0 0 0 3px rgba(var(--cx-brand-rgb), .18); /* ------------------------------------------------------------ TYPE SCALE Siete tamanos, ni uno mas. Sora sostiene los titulos, Karla todo lo demas; el layout ya carga ambas. */ --cx-font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --cx-font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif; --cx-text-xs: 12px; --cx-text-sm: 14px; --cx-text-md: 16px; --cx-text-lg: 20px; --cx-text-xl: 28px; --cx-text-2xl: 40px; /* Un septimo escalon por debajo de xs. Los rotulos en versalitas del panel ("RESUMEN", "NUEVO PEDIDO") ya vivian a 10-11px repartidos en once valores distintos; este es su sitio unico. */ --cx-text-2xs: 11px; /* ------------------------------------------------------------ TYPE WEIGHT El panel compensaba con grosor lo que le faltaba en tamano: los

de seccion se pintaban a 16px con peso 850. Al abrir la escala de tamano el peso puede volver a su trabajo real, que es enfatizar, no jerarquizar. Las fuentes se cargan estaticas en 400/500/600/700/800: cualquier valor intermedio (650, 750, 850) no existia y el navegador lo redondeaba. */ --cx-weight-body: 400; --cx-weight-medium: 500; --cx-weight-label: 600; --cx-weight-title: 700; --cx-weight-display: 800; /* ----------------------------------------------------------- TYPE LEADING Habia doce interlineados distintos, casi todos entre 1.1 y 1.35: apretado de mas para leer parrafos. El cuerpo sube a 1.55; lo apretado se reserva para titulos y cifras, donde si es correcto. */ --cx-leading-none: 1; --cx-leading-tight: 1.15; --cx-leading-snug: 1.35; --cx-leading-normal: 1.55; --cx-leading-relaxed: 1.7; /* ---------------------------------------------------------- TYPE TRACKING Cuanto mas grande el texto, mas sobra el espacio entre letras; cuanto mas pequeno y en versalitas, mas falta. La hoja ya lo intuia con doce valores sueltos: esto los ordena en cuatro. */ --cx-track-display: -.022em; --cx-track-title: -.012em; --cx-track-normal: 0; --cx-track-wide: .06em; --cx-track-caps: .12em; /* ------------------------------------------------------------------ SHAPE El panel tenia trece radios distintos y veintiseis sombras. A la vista eso no se lee como variedad, se lee como descuido: nada parece decidido. Cuatro radios, y cada uno significa algo. Y una regla que importa mas que los valores: EL RADIO NO SE ANIDA. Si un contenedor de 18px lleva dentro otra caja de 16px, el ojo ve dos esquinas casi iguales y el conjunto pierde forma. Lo de dentro es pozo (12px) o control (10px); nunca otro panel. */ /* Plano del chrome. El sidebar y la cabecera no tenian superficie propia: eran transparentes sobre un degradado del body, asi que compartian suelo con el contenido y nada retrocedia. Este es su plano, ocho puntos de luz por debajo del lienzo, en la misma familia rosa. No es un color nuevo: es el mismo matiz 341 de la marca, desaturado y bajado de luz. */ /* Desaturado a peticion del dueno: "bajar el exceso de rosa en superficies secundarias". Mismo matiz 341 de la familia, pero de saturacion 30 a 11: deja de leerse como una superficie rosa y pasa a neutro calido. El rosa saturado se reserva para la marca, que es donde informa. La luz no se toca, asi que el escalon de tres planos y todos los contrastes medidos siguen valiendo. */ /* Segundo ajuste: con el lienzo de vuelta al rosa de la landing, el chrome a saturacion 16 se leia gris al lado. Sube a 24 conservando la luz 89: sigue siendo el plano que retrocede, pero de la misma familia. */ --cx-chrome: #FDEEF1; --cx-chrome-line: #F6D5DE; /* ----------------------------------------------------------------- MOTION Habia seis duraciones (0.18, 0.20, 0.22, 0.25, 0.30, 0.42) y cuatro curvas casi identicas -.22/.9/.3/1, .2/.75/.3/1, .2/.8/.3/1- que nadie distingue. No era variedad: era deriva, la misma que tuvimos con los radios y las sombras. Tres duraciones y dos curvas. El pulso del producto se decide aqui. Por que ease-out y no ease: ease arranca lento, y los primeros sesenta milisegundos son justo donde el ojo esta mirando. Una transicion de 180ms con ease-out SE PERCIBE mas rapida que la misma con ease sin cambiar un solo milisegundo. ease-in no se usa nunca en interfaz. */ --cx-motion-press: 120ms; /* acuse de recibo al pulsar */ --cx-motion-fast: 180ms; /* hover y cambios de estado */ --cx-motion-base: 240ms; /* desplegables y paneles */ --cx-ease-out: cubic-bezier(.23, 1, .32, 1); --cx-ease-in-out: cubic-bezier(.77, 0, .175, 1); --cx-radius-control: 10px; /* botones, campos, fichas cuadradas */ --cx-radius-inset: 12px; /* pozos y datos DENTRO de un panel */ --cx-radius-panel: 18px; /* contenedores de primer nivel */ --cx-radius-pill: 999px; /* estados y filtros: forma que ya significa */ /* ------------------------------------------------------------- ELEVATION Tres niveles y el vacio. La sombra deja de ser decoracion y pasa a decir una sola cosa: que hay encima de que. (ninguna) lienzo: cabeceras de seccion, barras de filtro, meta sm panel: la superficie de trabajo md destacado: UNO por pagina, el dato que importa lg flotante: desplegables y capas sobre el contenido Los valores viven en la seccion SHADOW de mas abajo. */ /* ------------------------------------------------------------------ SPACE Esta escala se declaro a ojo en pasos de 4px y nunca se uso. Al medir el panel resulto que ya respetaba una rejilla propia y mas fina: 2, 4, 6, 8, 10, 12 y 16 cubren el 88% de sus 626 magnitudes. Un panel denso necesita esos medios pasos, asi que la escala se corrige para describir el producto en vez de obligarlo: rejilla de 2px hasta 12, de 4px a partir de ahi. Los nombres -1 a -7 se conservan; los medios pasos se intercalan. */ --cx-space-05: 2px; --cx-space-1: 4px; --cx-space-15: 6px; --cx-space-2: 8px; --cx-space-25: 10px; --cx-space-3: 12px; --cx-space-4: 16px; --cx-space-45: 20px; --cx-space-5: 24px; --cx-space-6: 32px; --cx-space-7: 48px; /* --------------------------------------------------------------- FALLBACK Consumed by dashboard-refresh.css but never declared anywhere, which left the ticket switch with no colour. Declared here so it resolves; the component itself is reviewed in a later phase. */ --clixy-ticket-switch-top: var(--cx-surface); }