/* ───────────────────────────────────────────────────────────────────────── CONTRATO DE TOKENS · @donaumorgen/canon Una landing solo declara SIETE valores de marca. Todo lo demas se deriva aqui, y por eso no puede desincronizarse: era exactamente el fallo que tenian las 13 landings antes de este paquete, donde el color del boton y el de los enlaces salian de fuentes distintas. En la hoja de la landing: :root { --brand-50: #eff6ff; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; <- color de ACCION --brand-700: #1d4ed8; <- texto acentuado, hover --brand-800: #1e40af; --accent2-600: #334155; <- acento ESTRUCTURAL (eyebrow, chips) } Y nada mas. Si necesitas un octavo token, es que el componente que lo pide deberia vivir en este paquete. ───────────────────────────────────────────────────────────────────────── */ :root { /* Valores por defecto: pizarra neutra. Una landing sin marca declarada se ve sobria, no rota. */ --brand-50: #f1f5f9; --brand-400: #94a3b8; --brand-500: #64748b; --brand-600: #475569; --brand-700: #334155; --brand-800: #1e293b; --accent2-600: #475569; /* ── Tinta sobre el boton primario ─────────────────────────────────────── Blanco salvo que la marca sea tan clara que falle AA; en ese caso la landing lo pisa con #0f172a y lo documenta. */ --brand-ink: #ffffff; /* ── Extremos del degradado del boton primario ─────────────────────────── El rango 600→700 es demasiado oscuro para tinta oscura y el 400→500 demasiado claro para tinta blanca: ninguna tinta aguanta los dos. La eleccion va emparejada y depende de la luminancia de la marca. marca oscura (azul, indigo, violeta, magenta, granate, rosa): tinta blanca sobre 600→700 <- el defecto de aqui marca clara (lima, verde, cian, naranja, ambar): --btn-from: var(--brand-400); --btn-to: var(--brand-500); --brand-ink: #0f172a; Medido sobre las 13: con el par equivocado el texto cae entre 2.76 y 4.23:1; con el correcto, entre 4.6 y 9.0:1. */ --btn-from: var(--brand-600); --btn-to: var(--brand-700); /* ── Superficies ──────────────────────────────────────────────────────── Derivadas de la marca, no neutras puras: un gris sin tinte se lee como descuido. El 4% es el limite donde el tinte se percibe sin competir. */ --page: color-mix(in srgb, var(--brand-600) 4%, #ffffff); --surface: #ffffff; --surface-2: color-mix(in srgb, var(--brand-600) 7%, #ffffff); /* ── Tinta ──────────────────────────────────────────────────────────────— */ --fg: color-mix(in srgb, var(--brand-800) 12%, #0f172a); --fg-soft: color-mix(in srgb, var(--brand-700) 10%, #334155); /* #64748b daba 4.45:1 sobre las paginas mas claras, justo por debajo de AA. #5b6675 deja margen sin cambiar el caracter del gris. */ --fg-muted: color-mix(in srgb, var(--brand-600) 8%, #5b6675); /* ── Lineas ───────────────────────────────────────────────────────────── --line es hairline de superficie. --line-control es el borde de un control interactivo y cumple el 3:1 que pide WCAG 1.4.11: en un boton secundario de fondo blanco, el borde es lo unico que lo identifica. */ --line: color-mix(in srgb, var(--accent2-600) 30%, transparent); --line-strong: color-mix(in srgb, var(--accent2-600) 55%, transparent); --line-control: color-mix(in srgb, var(--accent2-600) 80%, transparent); /* ── Eyebrow y chips ──────────────────────────────────────────────────── Bicromia deliberada: la marca es ACCION, el accent2 es ESTRUCTURA. Un eyebrow del color de marca compite con el CTA por la misma atencion. */ --brand-fg: var(--brand-700); --eyebrow-fg: var(--accent2-600); /* Al 12%% el propio tinte del chip oscurecia el fondo lo justo para comerse medio punto de ratio y dejar el eyebrow entre 3.9 y 4.1:1. Al 7%% se sigue leyendo como pastilla y el texto recupera el margen. */ --chip-bg: color-mix(in srgb, var(--accent2-600) 7%, transparent); /* ── Estado ───────────────────────────────────────────────────────────── Independientes de la marca a proposito: "correcto" no puede ser rosa en una landing y verde en otra. */ --success: #15803d; --success-bg: #dcfce7; --success-fg: #15803d; --warning: #b45309; --warning-bg: #fef3c7; --warning-fg: #b45309; --danger: #b91c1c; --danger-bg: #fee2e2; --danger-fg: #b91c1c; --info: #0369a1; --info-bg: #e0f2fe; --info-fg: #0369a1; /* ── Radios: cuatro, y ninguno mas ────────────────────────────────────── Antes convivian entre 11 y 16 valores por pagina. */ --r-pill: 999px; /* botones, chips, badges de estado */ --r-card: 0.86rem; /* tarjetas, planes, FAQ */ --r-mock: 1rem; /* marco del mock y de las imagenes de seccion */ --r-badge: 12px; /* isotipo del logo */ /* ── Ritmo vertical y medida ──────────────────────────────────────────── Sin unidades vh: el ritmo no debe depender de la ALTURA del viewport. */ --sec-y: clamp(4rem, 6vw, 6rem); --hero-y: clamp(3.5rem, 5vw, 4.5rem); --container: 1200px; --gutter: 32px; --gutter-movil: 24px; --measure: 52ch; /* Tinte de marca sobre las imagenes de seccion (.z-media::after). Muy tenue y en diagonal: da pertenencia sin convertirse en un scrim que ensucie la foto. Vivia solo en el global.css de cada landing, asi que al adoptar el paquete las nueve migradas se quedaron sin el y las imagenes perdieron el tinte sin que nadie lo notara. */ --z-media-tint: linear-gradient(150deg, color-mix(in srgb, var(--brand-600) 16%, transparent), transparent 66%); /* Literal del badge del mock. Sin fechas: caducan y ya habia tres landings mostrando un mes pasado. */ --demo-stamp: "Vista demostrativa"; /* ── Paleta del mock de producto ──────────────────────────────────────── El mock es una CAPTURA de una app clara, no una superficie del tema. Por eso NO se invierte en oscuro: en una landing oscura sigue siendo la foto de una app clara, que es como se comportan hoy activalog y frambia. Tenerlo como namespace propio evita que alguien lo "arregle" mas adelante conectandolo al tema y rompa las cuatro landings oscuras a la vez. */ --mock-bg: #f1f5f9; --mock-surface: #ffffff; --mock-line: #e2e8f0; --mock-line-strong: #cbd5e1; --mock-fg: #0f172a; --mock-fg-soft: #64748b; --mock-fg-muted: #94a3b8; --mock-dot-rojo: #f87171; --mock-dot-ambar: #fbbf24; --mock-dot-verde: #34d399; --mock-success-fg: #15803d; --mock-success-bg: #dcfce7; --mock-warning-fg: #b45309; --mock-warning-bg: #fef3c7; --mock-danger-fg: #b91c1c; --mock-danger-bg: #fee2e2; --mock-info-fg: #0369a1; --mock-info-bg: #e0f2fe; color-scheme: light; } /* ───────────────────────────────────────────────────────────────────────── TEMA OSCURO Se activa con [data-theme="dark"] en , nunca por prefers-color-scheme: el tema de una landing es una decision de marca, no una preferencia del sistema operativo. Solo se redefinen los tokens SEMANTICOS. Los de marca no cambian, y por eso una landing oscura no necesita una paleta paralela: era lo que obligaba a activalog y frambia a incrustar 40 hex de Slate a mano. ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --page: color-mix(in srgb, var(--brand-600) 9%, #0a0c0f); --surface: color-mix(in srgb, var(--brand-600) 7%, #14181e); --surface-2: color-mix(in srgb, var(--brand-600) 11%, #1a1f26); --fg: color-mix(in srgb, var(--brand-400) 10%, #f8fafc); --fg-soft: color-mix(in srgb, var(--brand-400) 14%, #cbd5e1); --fg-muted: color-mix(in srgb, var(--brand-400) 16%, #94a3b8); /* El acento estructural CONSERVA SU TONO en oscuro; solo sube de luminancia. Antes lo sustituia por --brand-400, y eso volvia monocromas las marcas bicromas: activalog, frambia y relavian tienen bronce como acento y lo perdian entero. Un bronce medio da 5.3-5.9:1 sobre fondo casi negro, asi que no hacia falta sustituirlo; aclararlo es suficiente y mantiene la identidad. */ --accent2-luz: color-mix(in srgb, var(--accent2-600) 62%, #ffffff); --line: color-mix(in srgb, var(--accent2-luz) 22%, transparent); --line-strong: color-mix(in srgb, var(--accent2-luz) 38%, transparent); --line-control: color-mix(in srgb, var(--accent2-luz) 66%, transparent); /* La marca como color de TEXTO sobre una superficie de pagina. No vale --brand-700 a secas: los tonos de marca no se redefinen en oscuro — eso es lo que evita que una landing oscura necesite paleta paralela — asi que un 700 pensado para fondo claro se queda por debajo del umbral. */ --brand-fg: var(--brand-400); --eyebrow-fg: var(--accent2-luz); --chip-bg: color-mix(in srgb, var(--accent2-600) 20%, transparent); /* El estado tambien sube: los tonos de fondo claro son ilegibles en oscuro. */ --success: #4ade80; --success-bg: color-mix(in srgb, #22c55e 18%, transparent); --success-fg: #86efac; --warning: #fbbf24; --warning-bg: color-mix(in srgb, #f59e0b 18%, transparent); --warning-fg: #fcd34d; --danger: #f87171; --danger-bg: color-mix(in srgb, #ef4444 18%, transparent); --danger-fg: #fca5a5; --info: #38bdf8; --info-bg: color-mix(in srgb, #0ea5e9 18%, transparent); --info-fg: #7dd3fc; color-scheme: dark; }