/* ========================================================================== JARVIS Design Tokens v2 -- Sistema dual de tema Compatible con tokens existentes. Solo se REFINAN colores dark y se AGREGA paleta light. Nombres de variables sin cambios. ========================================================================== */ :root { /* Tema dark - Deep Tech Operations */ --bg: #051424; --bg-elevated: #0d1c2d; --bg-overlay: #122131; --bg-hover: #1c2b3c; --bg-active: #273647; --border: #3a4a44; --border-subtle: #122131; --border-strong: #83958d; --text-primary: #d4e4fa; --text-secondary: #b9cbc3; --text-tertiary: #83958d; --text-disabled: #3a4a44; --accent: #00FFD1; --accent-hover: #00e0b7; --accent-bg: rgba(0, 255, 209, 0.10); --accent-border: rgba(0, 255, 209, 0.28); --success: #00FFD1; --success-bg: rgba(0, 255, 209, 0.10); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.10); --danger: #FF4D4D; --danger-bg: rgba(255, 77, 77, 0.10); --info: #7DD3FC; --info-bg: rgba(125, 211, 252, 0.10); --neutral: #A1A1A9; --neutral-bg: rgba(161, 161, 169, 0.08); --purple: #A78BFA; --purple-bg: rgba(167, 139, 250, 0.10); --link: #3B82F6; --link-bg: rgba(59, 130, 246, 0.10); /* Tipografia - Deep Tech Operations */ --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Monaco, monospace; /* Glow */ --glow-accent: 0 0 20px rgba(0, 255, 209, 0.15); /* Espaciado escala de 4px (sin cambios) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 48px; --sp-10: 40px; --sp-11: 80px; --sp-12: 48px; /* Border radius (sin cambios) */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 14px; /* Escala tipografica */ --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px; /* Sombras */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.5); /* Layout (sin cambios) */ --sidebar-w: 248px; --topbar-h: 52px; } /* Tema light calido (activado con data-theme="light" en ) */ [data-theme="light"] { --bg: #FAFAF9; --bg-elevated: #FFFFFF; --bg-overlay: #FFFFFF; --bg-hover: #F5F5F4; --bg-active: #E7E5E4; --border: #E7E5E4; --border-subtle: #F5F5F4; --border-strong: #D6D3D1; --text-primary: #1C1917; --text-secondary: #44403C; --text-tertiary: #78716C; --text-disabled: #A8A29E; --accent: #0D9488; --accent-hover: #14B8A6; --accent-bg: rgba(13, 148, 136, 0.08); --accent-border: rgba(13, 148, 136, 0.25); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #D97706; --warning-bg: rgba(217, 119, 6, 0.08); --danger: #DC2626; --danger-bg: rgba(220, 38, 38, 0.08); --info: #2563EB; --info-bg: rgba(37, 99, 235, 0.08); --neutral: #78716C; --neutral-bg: rgba(120, 113, 108, 0.08); --purple: #7C3AED; --purple-bg: rgba(124, 58, 237, 0.08); --link: #2563EB; --link-bg: rgba(37, 99, 235, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08); } /* Tema dark explicito (para forzar dark cuando el sistema es light) */ [data-theme="dark"] { --bg: #051424; --bg-elevated: #0d1c2d; --bg-overlay: #122131; --bg-hover: #1c2b3c; --bg-active: #273647; --border: #3a4a44; --border-subtle: #122131; --border-strong: #83958d; --text-primary: #d4e4fa; --text-secondary: #b9cbc3; --text-tertiary: #83958d; --text-disabled: #3a4a44; --accent: #00FFD1; --accent-hover: #00e0b7; --accent-bg: rgba(0, 255, 209, 0.10); --accent-border: rgba(0, 255, 209, 0.28); --success: #00FFD1; --success-bg: rgba(0, 255, 209, 0.10); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.10); --danger: #FF4D4D; --danger-bg: rgba(255, 77, 77, 0.10); --info: #7DD3FC; --info-bg: rgba(125, 211, 252, 0.10); --neutral: #A1A1A9; --neutral-bg: rgba(161, 161, 169, 0.08); --purple: #A78BFA; --purple-bg: rgba(167, 139, 250, 0.10); --link: #3B82F6; --link-bg: rgba(59, 130, 246, 0.10); --glow-accent: 0 0 20px rgba(0, 255, 209, 0.15); } /* Modo auto: respeta preferencia del sistema cuando no hay data-theme */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #FAFAF9; --bg-elevated: #FFFFFF; --bg-overlay: #FFFFFF; --bg-hover: #F5F5F4; --bg-active: #E7E5E4; --border: #E7E5E4; --border-subtle: #F5F5F4; --border-strong: #D6D3D1; --text-primary: #1C1917; --text-secondary: #44403C; --text-tertiary: #78716C; --text-disabled: #A8A29E; --accent: #0D9488; --accent-hover: #14B8A6; --accent-bg: rgba(13, 148, 136, 0.08); --accent-border: rgba(13, 148, 136, 0.25); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #D97706; --warning-bg: rgba(217, 119, 6, 0.08); --danger: #DC2626; --danger-bg: rgba(220, 38, 38, 0.08); --info: #2563EB; --info-bg: rgba(37, 99, 235, 0.08); --neutral: #78716C; --neutral-bg: rgba(120, 113, 108, 0.08); --purple: #7C3AED; --purple-bg: rgba(124, 58, 237, 0.08); --link: #2563EB; --link-bg: rgba(37, 99, 235, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08); } }