/* ========================================================= GEONET — Design Tokens v2.0 Identidad de marca vigente · agosto 2026 Sustituye a geonet-tokens_V1-OBSOLETO.css ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Instrument+Sans:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap'); :root { /* ------------------------------------------------------- PALETA PRIMARIA Muestreada del logotipo aprobado ------------------------------------------------------- */ --geo-navy: #0A1A52; /* base oscura · texto principal (16.37:1 sobre blanco) */ --geo-indigo: #1842F0; /* primario de marca (6.83:1 sobre blanco — AA) */ --geo-cian: #00C6FF; /* acento de dato vivo (8.20:1 sobre navy) */ --geo-hueso: #F4F7FB; /* fondo claro */ /* ------------------------------------------------------- ESCALA ÍNDIGO 50 – 900 ------------------------------------------------------- */ --geo-indigo-50: #EEF2FE; --geo-indigo-100: #DCE4FD; --geo-indigo-200: #B9C8FB; --geo-indigo-300: #8AA3F7; --geo-indigo-400: #4A6BF4; --geo-indigo-500: #1842F0; /* = --geo-indigo */ --geo-indigo-600: #1536C4; /* hover · texto denso (8.91:1 sobre blanco) */ --geo-indigo-700: #122C9E; --geo-indigo-800: #0F2478; --geo-indigo-900: #0A1A52; /* = --geo-navy */ /* ------------------------------------------------------- ESCALA NEUTROS 0 – 800 ------------------------------------------------------- */ --geo-neutral-0: #FFFFFF; --geo-neutral-25: #F7F9FB; --geo-neutral-50: #F2F5F8; --geo-neutral-100: #E6EBF1; --geo-neutral-200: #D9E1EA; --geo-neutral-300: #B9C5D2; --geo-neutral-400: #8FA0B2; --geo-neutral-500: #6B7C8E; --geo-neutral-600: #4E5D6D; --geo-neutral-700: #35424F; --geo-neutral-800: #22303D; /* ------------------------------------------------------- ESTADOS DE RED Solo para interfaz. Nunca como color de marca. Siempre acompañar de texto + forma (ver SKILL.md §Color regla 4) ------------------------------------------------------- */ /* Cada estado tiene TRES piezas y una cuarta para tema oscuro: -base color del indicador (punto, barra, relleno) — NO es color de texto -text texto sobre fondo claro -bg fondo del badge en tema claro -text-dark texto sobre fondo oscuro Por qué existe -text-dark: los -base son colores saturados pensados como relleno. Usados como texto sobre las superficies oscuras reprueban AA. Medido sobre el fondo real del badge (base al 14 % sobre cada superficie): #E5484D → 3.78 / 3.21 / 3.49 reprueba en las tres #12B76A → 5.11 / 4.29 / 4.71 reprueba sobre --surface-2 #F79009 → 5.80 / 4.99 / 5.39 pasa, con poco margen Los -text-dark son el escalón 300 de cada rampa y pasan AA en las tres. */ /* FIX — señal fijada, precisión centimétrica */ --geo-status-fix-base: #12B76A; --geo-status-fix-text: #027A48; --geo-status-fix-bg: #ECFDF3; --geo-status-fix-text-dark: #6CE9A6; /* 8.83 / 7.41 / 8.14 ✓ AA */ /* FLOAT — solución flotante, precisión decimétrica */ --geo-status-float-base: #F79009; --geo-status-float-text: #B54708; --geo-status-float-bg: #FFFAEB; --geo-status-float-text-dark: #FEC84B; /* 8.81 / 7.57 / 8.18 ✓ AA */ /* AUTÓNOMO — sin corrección diferencial */ --geo-status-auto-base: #8FA0B2; --geo-status-auto-text: #4E5D6D; --geo-status-auto-bg: #F2F5F8; --geo-status-auto-text-dark: #B9C5D2; /* 9.34 / 7.76 / 8.56 ✓ AA */ /* SIN SEÑAL — sin datos de red */ --geo-status-nosignal-base: #E5484D; --geo-status-nosignal-text: #B42318; --geo-status-nosignal-bg: #FEF3F2; --geo-status-nosignal-text-dark: #FDA29B; /* 7.62 / 6.47 / 7.03 ✓ AA */ /* ------------------------------------------------------- TIPOGRAFÍA ------------------------------------------------------- */ --geo-font-brand: 'Outfit', sans-serif; /* 700 — títulos, cifras destacadas */ --geo-font-ui: 'Instrument Sans', sans-serif; /* 400/600 — interfaz, texto corrido */ --geo-font-data: 'Geist Mono', monospace; /* 400/500 — TODA cifra medida */ /* Escala tipográfica: font-size / line-height */ --geo-text-display-xl: clamp(36px, 4vw, 48px); --geo-lh-display-xl: 56px; --geo-text-display-l: 36px; --geo-lh-display-l: 44px; --geo-text-h1: 30px; --geo-lh-h1: 38px; --geo-text-h2: 24px; --geo-lh-h2: 32px; --geo-text-h3: 20px; --geo-lh-h3: 28px; --geo-text-body-l: 18px; --geo-lh-body-l: 28px; --geo-text-body: 16px; --geo-lh-body: 24px; --geo-text-body-s: 14px; --geo-lh-body-s: 20px; --geo-text-caption: 12px; --geo-lh-caption: 16px; /* Escala de datos (Geist Mono) */ --geo-text-data-l: 24px; --geo-lh-data-l: 32px; --geo-text-data: 16px; --geo-lh-data: 24px; --geo-text-data-s: 13px; --geo-lh-data-s: 18px; /* ------------------------------------------------------- ESPACIADO — base 4 px ------------------------------------------------------- */ --geo-space-1: 4px; --geo-space-2: 8px; --geo-space-3: 12px; --geo-space-4: 16px; --geo-space-5: 20px; --geo-space-6: 24px; --geo-space-8: 32px; --geo-space-10: 40px; --geo-space-12: 48px; --geo-space-16: 64px; --geo-space-20: 80px; --geo-space-24: 96px; /* ------------------------------------------------------- RADIOS ------------------------------------------------------- */ --geo-radius-sm: 6px; --geo-radius-md: 10px; --geo-radius-lg: 16px; --geo-radius-xl: 24px; --geo-radius-full: 999px; /* ------------------------------------------------------- SOMBRAS Siempre en rgba(10, 26, 82, ...) — navy con opacidad ------------------------------------------------------- */ --geo-shadow-sm: 0 1px 3px rgba(10, 26, 82, 0.06); --geo-shadow-md: 0 4px 12px rgba(10, 26, 82, 0.10); --geo-shadow-lg: 0 12px 28px rgba(10, 26, 82, 0.14); /* ------------------------------------------------------- ÁREAS DE TOQUE El usuario opera con guantes, de pie, bajo condiciones de campo ------------------------------------------------------- */ --geo-touch-min: 48px; /* mínimo accesible */ --geo-touch-field: 56px; /* acciones de campo */ /* ------------------------------------------------------- ANILLO DE FOCO Nunca se elimina. Cian, 4 px ------------------------------------------------------- */ --geo-focus-ring: 0 0 0 4px var(--geo-cian); } /* ========================================================= TOKENS SEMÁNTICOS Capa de tema sobre los primitivos --geo-*. Mismos nombres, valores distintos por tema. Los primitivos no se modifican. Los estados de red (--geo-status-*) son funcionales y no se sobreescriben en ningún tema. ========================================================= */ /* ------------------------------------------------------- TEMA CLARO — default y selector explícito ------------------------------------------------------- */ :root, [data-theme="light"] { /* Superficies */ --surface: var(--geo-hueso); /* #F4F7FB — fondo de página */ --surface-2: var(--geo-neutral-50); /* #F2F5F8 — paneles, inputs */ --surface-raised: var(--geo-neutral-0); /* #FFFFFF — cards, modals */ /* Texto --text sobre --surface-raised: navy/blanco = 16.37:1 ✓ AAA */ --text: var(--geo-navy); /* #0A1A52 — texto principal */ --text-muted: var(--geo-neutral-600); /* #4E5D6D — texto secundario */ --text-faint: var(--geo-neutral-400); /* #8FA0B2 — labels, captions */ /* Bordes sólidos (no translúcidos: en claro no hay glassmorphism) */ --border: var(--geo-neutral-200); /* #D9E1EA — línea sutil */ --border-strong: var(--geo-neutral-300); /* #B9C5D2 — línea visible */ /* Interacción primaria --primary sobre --surface-raised: 6.83:1 ✓ AA */ --primary: var(--geo-indigo); /* #1842F0 */ --primary-hover: var(--geo-indigo-600); /* #1536C4 — 8.91:1 ✓ AAA */ --on-primary: var(--geo-neutral-0); /* #FFFFFF sobre botón primario */ /* Acento de dato vivo Cian (#00C6FF) = 2.00:1 sobre blanco → solo elementos NO textuales: bordes activos, puntos de indicador, trazos de gráfica. */ --accent: var(--geo-cian); /* Anillo de foco Cian sobre blanco = 2.00:1, no supera el umbral de 3:1 de WCAG 2.4.11. Se usa índigo semitransparente: 6.83:1 base → legible en todos los fondos del tema claro. */ --focus-ring: 0 0 0 4px rgba(24, 66, 240, 0.40); /* Glassmorphism → superficies sólidas en tema claro Los selectores .gn-glass usan estas variables; al asignarlas a valores sólidos el efecto colapsa limpiamente sin requerir @supports. */ --glass-bg: var(--surface-raised); --glass-blur: blur(0px); --glass-border: var(--border); /* Texto de enlace --link sobre blanco #FFFFFF: 6.83:1 ✓ AA --link-hover sobre blanco: 8.91:1 ✓ AAA */ --link: var(--primary); /* #1842F0 */ --link-hover: var(--geo-indigo-600); /* #1536C4 — 8.91:1 sobre blanco */ /* Texto de estado — capa semántica. El CSS de componente usa SIEMPRE --status-*-fg, nunca --geo-status-*-base, para que el tema decida. En claro apunta a los -text de siempre. */ --status-fix-fg: var(--geo-status-fix-text); --status-float-fg: var(--geo-status-float-text); --status-auto-fg: var(--geo-status-auto-text); --status-nosignal-fg: var(--geo-status-nosignal-text); } /* ------------------------------------------------------- TEMA OSCURO — dashboard operativo CORS ------------------------------------------------------- */ [data-theme="dark"] { /* Superficies Jerarquía de profundidad en escala índigo oscura. --surface-raised es semitransparente para que el glassmorphism funcione sobre --surface sin necesidad de un color base separado. */ --surface: var(--geo-navy); /* #0A1A52 — fondo de página */ --surface-2: var(--geo-indigo-800); /* #0F2478 — paneles, inputs */ --surface-raised: rgba(15, 36, 120, 0.50); /* indigo-800 50% — cards */ /* Texto */ --text: var(--geo-neutral-0); /* #FFFFFF — ∞:1 sobre navy */ --text-muted: var(--geo-neutral-300); /* #B9C5D2 — texto secundario */ --text-faint: var(--geo-neutral-400); /* #8FA0B2 — labels, captions */ /* Bordes translúcidos sobre fondo oscuro */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); /* Interacción primaria Índigo como fondo de botón: el par botón/texto = #1842F0 / #FFFFFF es legible. Índigo NO se usa como color de texto sobre navy (2.40:1). En hover, paso hacia un índigo más claro (sentido en dark mode). */ --primary: var(--geo-indigo); /* #1842F0 — bg de botón */ --primary-hover: var(--geo-indigo-400); /* #4A6BF4 — hover (más claro)*/ --on-primary: var(--geo-neutral-0); /* #FFFFFF sobre botón */ /* Acento de dato vivo Cian sobre navy: 8.20:1 ✓ — sirve también como color de texto. */ --accent: var(--geo-cian); /* #00C6FF */ /* Texto de enlace --link sobre tarjeta #0C1E5F: 6.34:1 ✓ AA; sobre navy #0A1A52: 6.84:1 ✓ --link-hover (cian): 8.20:1 sobre navy ✓ AAA */ --link: var(--geo-indigo-300); /* #8AA3F7 */ --link-hover: var(--accent); /* #00C6FF */ /* Anillo de foco — cian: 8.20:1 sobre navy ✓ */ --focus-ring: var(--geo-focus-ring); /* 0 0 0 4px #00C6FF */ /* Glassmorphism recoloreado a paleta índigo --glass-bg usa indigo-800 translúcido (no el navy #07172B de v1). --glass-border usa indigo-200 a muy baja opacidad para el halo índigo. */ --glass-bg: rgba(15, 36, 120, 0.35); /* indigo-800 35% */ --glass-blur: blur(12px); --glass-border: rgba(184, 200, 251, 0.12); /* --geo-indigo-200 a 12% */ /* Texto de estado — en oscuro apunta a los -text-dark. Medido sobre el fondo real del badge, no sobre la superficie desnuda. */ --status-fix-fg: var(--geo-status-fix-text-dark); /* #6CE9A6 */ --status-float-fg: var(--geo-status-float-text-dark); /* #FEC84B */ --status-auto-fg: var(--geo-status-auto-text-dark); /* #B9C5D2 */ --status-nosignal-fg: var(--geo-status-nosignal-text-dark); /* #FDA29B */ }