/* ========================================================================== EntroPy - Design System Variables ========================================================================== */ :root { /* * COLOR PALETTE (Base Tokens) * ------------------------------------------------------------------------ */ /* Sapphire (Brand & Neutrals) */ --sapphire-50: #ECEFF8; /* Fondo principal en light mode, superficies de tarjetas */ --sapphire-100: #DADFF1; /* Fondos secundarios, hover states en light mode */ --sapphire-300: #8FA0D6; /* Bordes, separadores, elementos de baja jerarquía */ --sapphire-400: #8FA0D6; /* Color de acento secundario, iconos activos, highlights */ --sapphire-450: #6A80C8; /* Acento aclarado para dark mode y badges verificados */ --sapphire-500: #4560BA; /* Color primario de la marca, CTAs, Entropy Score saludable */ --sapphire-700: #293A70; /* Texto sobre fondos claros, encabezados en light mode */ --sapphire-800: #1C264A; /* Fondo principal en dark mode, superficies de tarjetas oscuras */ --sapphire-900: #0E1325; /* Fondo profundo en dark mode, sidebar, navegación */ --sapphire-950: #0A0D1A; /* Fondo más oscuro, overlays, modal backgrounds */ /* Neutrals & Text */ --blanco-roto: #E8E6E0; /* Texto principal sobre fondos oscuros */ --gris-neutro: #9CA3AF; /* Links de afiliado, opciones secundarias */ /* Alerts & System Colors */ --ambar-alerta: #F0A830; /* Alertas nivel medio, objetos 30%-60% de vida, garantías próximas */ --coral-critico:#FF6B4A; /* Estado crítico < 30%, garantías vencidas */ /* * SEMANTIC TOKENS (Light Mode por defecto) * ------------------------------------------------------------------------ */ /* Fondos */ --bg-base: var(--sapphire-50); --bg-surface: var(--sapphire-100); --bg-deep: var(--sapphire-50); --bg-overlay: rgba(10, 13, 26, 0.5); /* Sapphire 950 alpha */ /* Textos */ --text-main: var(--sapphire-700); --text-muted: var(--sapphire-500); /* Acentos y Marca */ --accent-primary: var(--sapphire-500); --accent-secondary: var(--sapphire-400); --border-color: var(--sapphire-300); /* Casos de uso específicos del negocio */ /* 1. Sistema de urgencia cromático (Barras de vida y Garantías) */ --status-healthy: var(--sapphire-500); /* > 60% vida o garantía vigente */ --status-warning: var(--ambar-alerta); /* 30-60% vida o caduca en < 60 días */ --status-critical: var(--coral-critico);/* < 30% vida o garantía vencida */ /* 2. Marketplace Km0 */ --badge-verified: var(--sapphire-450); /* Negocios locales verificados */ --link-affiliate: var(--gris-neutro); /* Links de afiliado (opción secundaria) */ } /* * DARK MODE THEME * (Activable por media query o por clase en el e.g., ) * ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root { /* Fondos */ --bg-base: var(--sapphire-900); --bg-surface: var(--sapphire-800); --bg-deep: var(--sapphire-950); --bg-overlay: rgba(10, 13, 26, 0.8); /* Textos */ --text-main: var(--blanco-roto); --text-muted: var(--sapphire-300); /* Acentos y Marca */ --accent-primary: var(--sapphire-450); /* Se aclara para mantener contraste */ --accent-secondary: var(--sapphire-400); --border-color: var(--sapphire-700); } } /* Opcional: Soporte explícito de clase para toggle manual modo claro/oscuro */ [data-theme="dark"], .dark { /* Repetición manual para frameworks que basan el darkmode en clases (Tailwind, etc) */ --bg-base: var(--sapphire-900); --bg-surface: var(--sapphire-800); --bg-deep: var(--sapphire-950); --bg-overlay: rgba(10, 13, 26, 0.8); --text-main: var(--blanco-roto); --text-muted: var(--sapphire-300); --accent-primary: var(--sapphire-450); --accent-secondary: var(--sapphire-400); --border-color: var(--sapphire-700); }