/* ============================================================================= * TechnoSense-Wx — theme.css * ----------------------------------------------------------------------------- * Tokens globales de diseño. Punto único de verdad para colores, tipografía, * espaciados y sombras. Cambiar un valor aquí lo cambia en todo el sistema. * * Modo oscuro: agregar data-theme="dark" en activa el bloque dark. * El toggle lee/escribe localStorage('ts-theme') y aplica antes del paint. * * Cargar SIEMPRE primero, antes de base.css, components.css y el CSS de módulo. * ============================================================================= */ /* ── Tema claro (por defecto) ─────────────────────────────────────────────── */ :root { /* Paleta: cielo / instrumento */ --sky-900: #0c4a6e; --sky-700: #075985; --sky-600: #0284c7; --sky-100: #e0f2fe; /* Acento: radiación solar */ --solar-600: #d97706; --solar-500: #f59e0b; --solar-100: #fef3c7; /* Neutros — tema claro */ --ink: #1e293b; --ink-soft: #475569; --muted: #94a3b8; --line: #e2e8f0; --paper: #f8fafc; --white: #ffffff; /* Superficies de cards y header */ --surface-1: #ffffff; /* cards, panels */ --surface-2: #f8fafc; /* página, fondos */ --surface-3: #f1f5f9; /* hovers, inputs */ /* Estados */ --ok: #16a34a; --warn: #f59e0b; --error: #dc2626; --idle: #94a3b8; /* Tipografía */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Inter", system-ui, -apple-system, sans-serif; --font-data: "JetBrains Mono", "SF Mono", "Consolas", monospace; --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 0.95rem; --fs-md: 1.1rem; --fs-lg: 1.5rem; --fs-xl: 2rem; --fs-2xl: 2.75rem; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* Espaciado */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; /* Radios */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* Sombras — modo claro */ --shadow-sm: 0 1px 3px rgba(12, 74, 110, 0.08); --shadow-md: 0 4px 16px rgba(12, 74, 110, 0.10); --shadow-lg: 0 12px 40px rgba(12, 74, 110, 0.14); /* Transiciones */ --t-fast: 0.15s ease; --t-base: 0.25s ease; /* Ícono del toggle (sol/luna) */ --theme-icon: 'sun'; } /* ── Tema oscuro ─────────────────────────────────────────────────────────── */ /* Inspirado en dashboards de instrumentación meteorológica: fondo casi negro, acentos azules y ámbar mantienen la identidad visual */ [data-theme="dark"] { /* Paleta: cielo nocturno */ --sky-900: #7dd3fc; /* azul claro — texto fuerte en oscuro */ --sky-700: #38bdf8; /* azul medio */ --sky-600: #0ea5e9; /* azul instrumento */ --sky-100: #0c2a3e; /* azul muy oscuro — fondos sutiles */ /* Acento solar — mantener energía visual */ --solar-600: #f59e0b; --solar-500: #fbbf24; --solar-100: #1c1609; /* Neutros — tema oscuro */ --ink: #f1f5f9; /* texto cuerpo: casi blanco */ --ink-soft: #cbd5e1; /* texto secundario */ --muted: #64748b; /* texto terciario, labels */ --line: #1e293b; /* bordes, divisores */ --paper: #0b1120; /* fondo de página: azul muy oscuro */ --white: #131f35; /* "blanco" en oscuro: superficie primaria */ /* Superficies escalonadas */ --surface-1: #162032; /* cards, panels */ --surface-2: #0b1120; /* página */ --surface-3: #1e293b; /* hovers, inputs */ /* Estados — ligeramente más brillantes en oscuro */ --ok: #22c55e; --warn: #fbbf24; --error: #f87171; --idle: #475569; /* Sombras — oscuro con glow azul sutil */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); }