/* ============================================================================ ZENITH CONSULTING 360 — tokens.css Sistema de diseño. Única fuente de verdad de color, tipografía, espacio, forma, profundidad y movimiento. NO escribas valores hex, px de espaciado ni duraciones fuera de este archivo. Si necesitas un valor nuevo, se declara aquí primero. Ratios de contraste verificados en Fase 0 (WCAG 2.1). Ver bloque "REGLAS DURAS DE COLOR" más abajo y la matriz completa en styleguide.html. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. COLOR --------------------------------------------------------------------- */ /* Tinta — texto y trazo */ --ink-900: #0B1A24; /* texto principal. 16.89:1 sobre paper-50 */ --ink-600: #33454F; /* texto secundario. 9.53:1 sobre paper-50 */ --ink-400: #6E7F89; /* SOLO hairlines, bordes e iconografía inactiva. 3.96:1 — NO alcanza AA para texto normal. */ /* Marca — azul institucional (del logo actual, obligatorio) */ --brand-900: #001F38; --brand-800: #003054; /* AZUL DE MARCA */ --brand-600: #0A5183; --brand-400: #4E8CB8; --brand-200: #B9D3E6; --brand-100: #DEEBF4; /* Prueba — verde de marca (del logo actual, obligatorio) */ --proof-800: #00622F; /* texto verde en micro/denso. 7.19:1 sobre paper-50 */ --proof-700: #007A39; /* [NUEVO Fase 0] texto verde AA. 5.22:1 sobre paper-50 */ --proof-600: #008A41; /* SOLO UI: focus ring, trazo, texto grande. 4.26:1 — no alcanza AA para texto normal. */ --proof-500: #00B454; /* VERDE DE MARCA. Relleno y trazo. NUNCA texto sobre papel. */ --proof-200: #B4EACC; --proof-100: #E3F7EC; /* Papel — fondos */ --paper-50: #F8FAFB; /* fondo dominante */ --paper-100: #EDF2F5; --paper-200: #DBE3E9; /* hairline / línea de escala */ --white: #FFFFFF; /* solo tarjetas elevadas */ /* Semánticos */ --signal: #B4531C; /* brechas y alertas. 4.78:1 sobre paper-50. Nunca decorativo. */ --danger: #A8331F; /* 6.35:1 sobre paper-50 */ --info: #205F86; /* 6.59:1 sobre paper-50 */ /* -- Roles derivados (usa ESTOS en los componentes, no los crudos) -- */ --bg: var(--paper-50); --bg-raised: var(--white); --bg-sunken: var(--paper-100); --bg-anchor: var(--brand-900); /* secciones ancla / diagnóstico */ --text: var(--ink-900); --text-muted: var(--ink-600); --text-on-dark: var(--paper-50); --text-on-dark-mut:var(--brand-200); --rule: var(--paper-200); /* hairline editorial */ --rule-strong: var(--ink-400); --rule-on-dark: rgba(185, 211, 230, .24); /* CTA primario — verde de marca con etiqueta en tinta. Blanco sobre --proof-500 da 2.74:1 y está PROHIBIDO. */ --cta-bg: var(--proof-500); --cta-ink: var(--ink-900); /* 6.45:1 ✓ AA */ --cta-bg-hover: #00A64C; --cta-bg-active: #00913F; /* Foco — visible sobre papel (4.26:1) y sobre brand-900 (3.76:1), ambos ≥3:1 */ --focus: var(--proof-600); --focus-on-dark: var(--proof-500); /* --------------------------------------------------------------------- 2. TIPOGRAFÍA Dos rutas de display, mutuamente excluyentes. La activa se fija con data-type-route en . Ver styleguide.html para comparar. RUTA A (editorial) = Newsreader RUTA B (industrial) = Archivo --------------------------------------------------------------------- */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --font-num: var(--font-ui); /* las cifras NUNCA van en la serif */ --fs-display: clamp(2.75rem, 6.5vw + 1rem, 6.5rem); --fs-h1: clamp(2.25rem, 4.5vw + .5rem, 4.25rem); --fs-h2: clamp(1.875rem, 3vw + .5rem, 3rem); --fs-h3: clamp(1.25rem, 1.5vw + .75rem, 1.75rem); --fs-lead: clamp(1.125rem, .8vw + 1rem, 1.5rem); --fs-body: clamp(1rem, .35vw + .95rem, 1.125rem); --fs-micro: .8125rem; --lh-display: 1.0; --lh-title: 1.08; --lh-body: 1.6; --lh-micro: 1.45; --ls-title: -.025em; --ls-eyebrow: .16em; --ls-micro: .01em; --measure: 62ch; /* 58–66 caracteres. Nunca más. */ /* --------------------------------------------------------------------- 3. ESPACIO — escala 4px --------------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-48: 192px; --section-y: clamp(6rem, 12vh, 11rem); --gutter: clamp(1.25rem, 3vw, 2.5rem); --maxw: 1440px; --cols: 12; /* --------------------------------------------------------------------- 4. FORMA Y PROFUNDIDAD Radio contenido: la firma es de instrumento, no de app de consumo. --------------------------------------------------------------------- */ --r-sm: 4px; --r-md: 10px; --r-lg: 20px; --r-pill: 999px; --hairline: 1px; --shadow-md: 0 1px 2px rgba(11,26,36,.06), 0 8px 24px -8px rgba(11,26,36,.10); --shadow-lg: 0 2px 4px rgba(11,26,36,.05), 0 24px 48px -16px rgba(11,26,36,.16); --grain-opacity: .035; /* 3–4% sobre bloques de color sólido */ --orbit-bg-opacity: .06; /* patrón de placeholder — máximo permitido */ /* --------------------------------------------------------------------- 5. MOVIMIENTO --------------------------------------------------------------------- */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 220ms; --dur-base: 520ms; --dur-slow: 900ms; --dur-micro: 180ms; /* cambio de idioma / moneda */ --stagger-line: 70ms; --stagger-block: 90ms; --stagger-axis: 60ms; --z-nav: 100; --z-menu: 200; --z-dialog: 300; --z-wa: 90; } /* Ruta tipográfica B — industrial. Se activa con */ [data-type-route="b"] { --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --ls-title: -.02em; } /* ============================================================================ REGLAS DURAS DE COLOR — verificadas en Fase 0, no son preferencia estética ============================================================================ VERDE (--proof-500 #00B454) significa una sola cosa: prueba y acción. Permitido SOLO en: (a) relleno del CTA primario, (b) cifras de resultado verificadas y sus marcadores. Prohibido como fondo decorativo, icono de sección, subrayado de énfasis o ilustración. Contraste medido sobre --proof-500: texto blanco .......... 2.74:1 ✗ PROHIBIDO texto --ink-900 ....... 6.45:1 ✓ AA ← etiqueta del CTA primario texto --brand-900 ..... 6.11:1 ✓ AA Contraste de --proof-500 como TEXTO: sobre --paper-50 ...... 2.62:1 ✗ PROHIBIDO (confirmado en Fase 0) sobre --paper-100 ..... 2.43:1 ✗ PROHIBIDO sobre --brand-900 ..... 6.11:1 ✓ AA ← única superficie donde el verde de marca puede ser texto o cifra sobre --brand-800 ..... 4.94:1 ✓ AA Verde en texto sobre papel — usar la escala corregida: --proof-800 ........... 7.19:1 ✓ AA / AAA en micro --proof-700 ........... 5.22:1 ✓ AA ← por defecto para texto verde --proof-600 ........... 4.26:1 ✗ texto normal · ✓ UI y texto grande (focus ring, trazo, ≥24px) Verde sobre FOTOGRAFÍA: nunca directo. Exige scrim --brand-900 al 72% o superficie sólida detrás del marcador. Se verifica pieza por pieza. --ink-400 (3.96:1) NO es color de texto. Hairlines, bordes e iconos inactivos únicamente (umbral UI 3:1 ✓). PROHIBIDOS: gradientes morado/azul tipo SaaS, neón, degradados de tres colores, glassmorphism genérico. ========================================================================= */