/* ============================================================ AlphaNetworks · Design System variables.css — Tokens de diseño (única fuente de verdad) ------------------------------------------------------------ Consolidación del avance visual existente (styles.css v12). Tema: 100% dark · Sora + Inter · Acento #00B8D9 IMPORTANTE: no cambiar valores de marca sin revisar identidad. Los nombres de tokens preexistentes se conservan para que el CSS legacy y el nuevo sistema modular puedan coexistir durante la migración. ============================================================ */ :root { color-scheme: dark; /* ── Marca / Acento ─────────────────────────────────────── */ --cyan: #00B8D9; /* acento principal: CTA, enlaces, datos */ --cyan-hi: #33C9E6; /* hover / estado activo */ --cyan-dim: rgba(0,184,217,.15);/* fondos sutiles, chips, iconos */ --cyan-soft: rgba(0,184,217,.10); /* Cyan usado como COLOR DE TEXTO (no fondo/borde/icono): en dark el cyan de marca ya pasa AA (7.8:1); en claro el mismo cyan cae a ~2.3:1, así que este alias se oscurece solo en tema claro. Usar var(--cyan) para fondos/bordes/SVG (deben verse igual de vívidos en ambos temas); usar var(--cyan-text) para texto legible. */ --cyan-text: var(--cyan); /* Texto que va SOBRE fondo cyan sólido (botones, badges, skip-link). Fijo en ambos temas — el cyan de marca no cambia, así que el texto que se lee encima tampoco debe cambiar. */ --on-cyan: #071426; /* ── Colores de estado / secundarios ────────────────────── */ --green: #22C55E; --blue: #3B82F6; --yellow: #EAB308; --orange: #F97316; --red: #EF4444; --purple: #7C3AED; /* ── Fondos ─────────────────────────────────────────────── */ --bg: #071426; /* fondo base de la página */ --bg-card: #0D223A; /* superficie de tarjetas */ --bg-surf: #10243B; /* superficie elevada / inputs */ --bg-deep: #050E1C; /* footer / zonas profundas */ /* ── Bordes ─────────────────────────────────────────────── */ --border: #1F3857; --border-hi: #315C7A; /* ── Veladuras (fondo con transparencia sobre contenido detrás) ── Antes eran rgba(...) literales repetidos por todo el CSS — se veían bien en dark porque coincidían con --bg/--bg-card/--bg-deep, pero no cambiaban con el tema (quedaban navy fijo en modo claro). */ --bg-a98: rgba(7,20,38,.98); /* dropdown, menú móvil — casi opaco */ --bg-a96: rgba(7,20,38,.96); /* header al hacer scroll */ --bg-a85: rgba(7,20,38,.85); /* header en reposo */ --bg-a60: rgba(7,20,38,.6); /* velo medio: cabecera de modal */ --bg-a55: rgba(7,20,38,.55); /* stat box, encabezado de tabla */ --card-a70: rgba(13,34,58,.7); /* eco-card */ --card-a60: rgba(13,34,58,.6); /* trust strip */ --card-a50: rgba(13,34,58,.5); /* .sec.soft, degradado a transparent */ --card-a40: rgba(13,34,58,.4); /* wrapper de compare-table */ --deep-a98: rgba(5,14,28,.98); /* menú móvil (fondo profundo) */ /* ── Texto ──────────────────────────────────────────────── */ --text: #F4F8FF; /* texto principal */ --muted: #B3C8E0; /* secundario (alto contraste) */ --muted-2: #93AEC9; /* terciario */ --dim: #6B83A5; /* metadatos / deshabilitado */ /* ── Tipografía ─────────────────────────────────────────── */ --font-heading: 'Nunito', 'Nunito', system-ui, sans-serif; --font-body: 'Nunito', 'Segoe UI', Arial, sans-serif; /* ── Escala tipográfica ────────────────────────────────── SIETE pasos, no 45. El CSS traía 17 tamaños distintos apretados entre 11 y 15.7px (.87 vs .88rem…): nadie percibe esa diferencia, pero acumulada es la razón de que nada se leyera deliberado. Los pasos de abajo son cerrados a propósito (la UI lo necesita) y los de arriba se abren para que el título sea una declaración, no un párrafo en negritas. */ --fs-2xs: .75rem; /* 12 — etiquetas, micro-copy, legales */ --fs-xs: .875rem; /* 14 — texto secundario, listas, pies */ --fs-ui: .9375rem; /* 15 — nav, botones, controles */ --fs-base: 1rem; /* 16 — cuerpo */ --fs-md: 1.125rem; /* 18 — entradilla */ --fs-lg: 1.375rem; /* 22 — título de tarjeta */ --fs-xl: 1.75rem; /* 28 — cifras y destacados */ /* Alias heredados (CSS viejo que aún los nombra) */ --fs-sm: var(--fs-xs); --fs-2xl: 2rem; --fs-3xl: 2.5rem; /* Títulos fluidos. El techo sube de 50px a 68px: a 1440px de ancho, 50px era tímido para un titular a toda página. */ --fs-h1: clamp(1.85rem, 3.2vw, 2.6rem); /* 30 → 42 */ --fs-h2: clamp(1.5rem, 2.4vw, 1.95rem); /* 24 → 31 */ --fs-h3: var(--fs-lg); /* 22 */ /* Pesos */ --fw-light: 300; /* display grande: el peso del logotipo */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* Interlineado */ --lh-tight: 1.15; --lh-base: 1.6; --lh-loose: 1.7; /* ── Espaciado (escala base 4px) ────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --section-y: 88px; /* padding vertical de secciones (.sec) */ /* ── Radios ─────────────────────────────────────────────── */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-full: 100px; /* botones / pills */ /* ── Sombras ────────────────────────────────────────────── */ --shadow-sm: 0 8px 28px rgba(0,0,0,.28); --shadow: 0 18px 50px rgba(0,0,0,.35); --shadow-brand: 0 8px 24px rgba(0,184,217,.15); /* ── Layout / contenedor ────────────────────────────────── */ --maxw: 1320px; /* contenedor estándar */ --maxw-fluid: min(1480px, 92vw); /* contenedor fluido widescreen */ --container-pad: 28px; /* ── Z-index (escala) ───────────────────────────────────── */ --z-base: 1; --z-dropdown: 20; --z-sticky: 50; /* header.nav */ --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; /* skip-link, notificaciones */ /* ── Transiciones ───────────────────────────────────────── */ --ease: cubic-bezier(.2,.7,.2,1); --transition-fast: .2s ease; --transition: .3s ease; --transition-slow: .65s var(--ease); /* ── Gradientes de marca ────────────────────────────────── */ --grad-body: radial-gradient(ellipse 900px 500px at 88% 0%, rgba(0,184,217,.13) 0%, transparent 55%), radial-gradient(ellipse 700px 600px at 4% 90%, rgba(14,100,180,.10) 0%, transparent 50%), var(--bg); --grad-card: linear-gradient(180deg, var(--bg-card), var(--bg-surf)); --grad-cta: linear-gradient(135deg, #0B1D38, #071426); } /* ============================================================ TEMA CLARO · "light cyan" (extensión consciente del dark-first) Mismo sistema aprobado del kit AlphaNetworks (Web UI / AlphaChannels v2.1.0), adaptado a los nombres de token de este proyecto. Se activa con la clase en : — el default sigue siendo DARK. El cyan de marca (--cyan) NO cambia entre temas; lo que cambia es --cyan-text (la variante legible sobre fondo claro) y los colores de estado (--green/--blue/--yellow/--orange/--red/ --purple), oscurecidos para pasar WCAG AA sobre el lienzo claro — los valores de --muted-2 y --dim aquí son más oscuros que los del kit base porque en este proyecto esos tokens sí cargan texto real (no solo metadatos), y los valores del kit no pasaban AA para eso. ============================================================ */ html.theme-light { --cyan-hi: #00A8C6; --cyan-dim: rgba(0,184,217,.16); --cyan-soft: rgba(0,184,217,.09); --cyan-text: #075A66; /* cyan oscurecido: 6.9–7.9:1 sobre los fondos claros */ --green: #166534; --blue: #1D4ED8; --yellow: #92400E; --orange: #9A3412; --red: #B91C1C; --purple: #6D28D9; --bg: #E7F6FA; --bg-deep: #D8EEF4; --bg-card: #FFFFFF; --bg-surf: #F2FAFC; --border: #C5E4ED; --border-hi: #8FCEDF; /* Veladuras — mismas capas, sobre el RGB de los fondos claros */ --bg-a98: rgba(231,246,250,.98); --bg-a96: rgba(231,246,250,.96); --bg-a85: rgba(231,246,250,.85); --bg-a60: rgba(231,246,250,.75); /* algo más opaco: en claro el borde con el contenido de atrás se nota más */ --bg-a55: rgba(231,246,250,.7); --card-a70: rgba(255,255,255,.85); --card-a60: rgba(255,255,255,.75); --card-a50: rgba(255,255,255,.6); --card-a40: rgba(255,255,255,.5); --deep-a98: rgba(216,238,244,.98); --text: #0B2239; --muted: #33596E; --muted-2: #3F607A; /* ajustado (kit: #5E8499, 4.0:1 — no pasaba AA de texto normal) */ --dim: #527486; /* ajustado (kit: #7C9DAD, 2.9:1 — fallaba incluso como texto grande) */ --shadow-sm: 0 8px 28px rgba(2,48,62,.10); --shadow: 0 18px 50px rgba(2,48,62,.14); --shadow-brand: 0 8px 24px rgba(0,184,217,.18); --grad-body: radial-gradient(ellipse 900px 500px at 88% 0%, rgba(0,184,217,.14) 0%, transparent 55%), radial-gradient(ellipse 700px 600px at 4% 90%, rgba(34,38,168,.07) 0%, transparent 50%), var(--bg); --grad-card: linear-gradient(180deg, #FFFFFF, #F7FCFD); --grad-cta: linear-gradient(135deg, #EAF8FB, #DCEFF5); color-scheme: light; } /* ============================================================ BREAKPOINTS (referencia) Las media queries NO aceptan variables CSS. Mantener estos valores sincronizados manualmente en responsive.css: sm → 560px (móvil grande) md → 680px (phablet) lg → 960px (tablet) xl → 1080px (desktop / colapso de nav) 2xl → 1600px (widescreen) 3xl → 1900px (ultra-wide) ============================================================ */