/* ========================================================================== AIntegra Limited — Design tokens -------------------------------------------------------------------------- Paleta CERRADA. No se añaden tonos nuevos ni derivados. Cada token de color lleva anotado su ratio de contraste medido para que cualquier uso futuro sea auditable sin tener que recalcularlo. ========================================================================== */ :root { /* --- Paleta de marca (los 8 colores oficiales, sin alterar) ------------ */ --brand-night: #081A2E; /* azul noche */ --brand-blue: #0C3862; /* azul marca */ --brand-mid: #245E8D; /* azul medio */ --brand-bright: #357FB2; /* azul brillante */ --brand-sky: #7FA8C9; /* azul cielo */ --brand-ice: #DCE6EE; /* azul hielo */ --brand-warm: #F5F8FA; /* blanco cálido */ --brand-white: #FFFFFF; /* --- Superficies ------------------------------------------------------- */ --surface-dark: var(--brand-night); /* hero, misión, impacto */ --surface-dark-alt: var(--brand-blue); /* bloques dentro de lo oscuro */ --surface-light: var(--brand-warm); /* fondo general claro */ --surface-light-alt: var(--brand-ice); /* producto, negocio, tarjetas */ --surface-card: var(--brand-white); /* --- Texto ------------------------------------------------------------ Ratios medidos (WCAG 2.2, umbral AA = 4.5 normal / 3.0 grande): night sobre warm → 16.44:1 AAA night sobre ice → 13.86:1 AAA blue sobre white → 11.95:1 AAA blue sobre warm → 11.20:1 AAA mid sobre warm → 6.43:1 AA (texto secundario en claro) mid sobre ice → 5.42:1 AA warm sobre night → 16.44:1 AAA sky sobre night → 6.97:1 AA (texto secundario en oscuro) sky sobre blue → 4.75:1 AA (justo: no bajar de aquí) Verificado con `node tools/contrast.mjs`. ---------------------------------------------------------------------- */ --text-on-light: var(--brand-night); --text-on-light-muted: var(--brand-mid); --text-on-dark: var(--brand-warm); --text-on-dark-muted: var(--brand-sky); /* --- Acción ----------------------------------------------------------- #357FB2 sobre blanco = 4.35:1 y blanco sobre #357FB2 = 4.35:1. Ambos QUEDAN POR DEBAJO de 4.5 → NUNCA como texto normal ni como relleno de botón con texto pequeño. Se reserva a: · hover / focus / active · bordes e iconografía (umbral no-textual 3:1 → cumple) · texto GRANDE (≥24px, o ≥18.66px bold) sobre fondo oscuro El relleno de los botones primarios es --brand-blue (11.9:1 con blanco). ---------------------------------------------------------------------- */ --action-fill: var(--brand-blue); --action-fill-hover: var(--brand-bright); --action-text: var(--brand-white); --link-on-light: var(--brand-blue); /* 11.9:1 */ --link-on-dark: var(--brand-sky); /* 7.0:1 */ --border-interactive: var(--brand-bright); /* 4.35:1 ≥ 3:1 no textual ✔ */ --border-subtle: var(--brand-sky); /* solo decorativo */ /* --- Foco ------------------------------------------------------------- Anillo de dos tonos: funciona sobre superficie clara y oscura sin tener que cambiar de token por sección. ---------------------------------------------------------------------- */ --focus-ring: var(--brand-bright); --focus-halo: var(--brand-warm); --focus-width: 3px; --focus-offset: 2px; /* --- Acento CATY ------------------------------------------------------ Uso PUNTUAL: icono de CATY, modo voz, transición del asistente. Nunca como fondo de texto ni como color de acción. ---------------------------------------------------------------------- */ --caty-glow: radial-gradient(60% 60% at 50% 40%, #A9C7FF 0%, #7FA8C9 45%, rgba(53,127,178,0) 100%); --caty-sheen: linear-gradient(135deg, #7FA8C9 0%, #A9C7FF 40%, #C9BFFF 70%, #7FA8C9 100%); /* --- Acabado plateado de C.A.T. --------------------------------------- Pareja del acento de CATY, para que el hardware no pierda peso al lado del asistente. No es un color de marca nuevo: es el material del dispositivo, compuesto solo con blancos y azules de la paleta. ---------------------------------------------------------------------- */ --cat-sheen: linear-gradient(135deg, #FFFFFF 0%, #F5F8FA 30%, #DCE6EE 58%, #7FA8C9 100%); --cat-glow: radial-gradient(60% 60% at 50% 35%, #FFFFFF 0%, #DCE6EE 48%, rgba(220,230,238,0) 100%); /* --- Tipografía ------------------------------------------------------- Las familias se resuelven en fonts.css. Aquí solo la estructura. No se fija font-size en : se respeta el tamaño del navegador. ---------------------------------------------------------------------- */ --font-display: var(--font-display-stack); --font-text: var(--font-text-stack); --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 → 19 px */ --step-1: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); --step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); --step-4: clamp(2rem, 1.6rem + 1.9vw, 2.9rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.65; /* WCAG 1.4.12: ≥1.5 en párrafos */ --tracking-tight: -0.02em; --tracking-wide: 0.08em; --measure: 68ch; /* ancho máximo de lectura */ /* --- Espaciado (base 4px) --------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(3.25rem, 2rem + 4.5vw, 5.5rem); /* Separación entre el bloque de titular de una sección y su rejilla de tarjetas. Token propio para poder darle aire sin inflar el alto de todas las secciones. */ --gap-head: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem); --container: 76rem; --container-narrow: 46rem; /* --- Formas ------------------------------------------------------------ */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(8, 26, 46, 0.08), 0 2px 8px rgba(8, 26, 46, 0.06); --shadow: 0 2px 6px rgba(8, 26, 46, 0.08), 0 12px 28px rgba(8, 26, 46, 0.10); --shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35); /* --- Movimiento -------------------------------------------------------- Todas las duraciones pasan por estos tokens; prefers-reduced-motion las pone a 0 en un único punto (base.css) en vez de parche por parche. ---------------------------------------------------------------------- */ --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --- Capas ------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-skip: 500; }