/* ===================================================================== DEMMA Solutions — Paleta de marca --------------------------------------------------------------------- Un solo archivo para todo: sitio web, ERP, sistemas para locales, documentos. Usar SIEMPRE los roles (--demma-fondo, --demma-marca…) en los componentes; las escalas (--petroleo-900…) solo para casos que los roles no cubran. Modo oscuro: automático según el sistema, o forzado con data-theme="dark" / data-theme="light" en . ===================================================================== */ :root { /* Petróleo — color principal de la marca */ --petroleo-50: #EEF9FD; --petroleo-100: #E1F0F5; --petroleo-200: #C8DDE6; --petroleo-300: #A5C4CF; --petroleo-400: #82A8B7; --petroleo-500: #638E9D; --petroleo-600: #477383; --petroleo-700: #335C6A; --petroleo-800: #234551; --petroleo-900: #0E3440; --petroleo-950: #0B1D24; /* Ámbar — acento (poco, con intención) */ --ambar-50: #FFF5E8; --ambar-100: #FFE9CD; --ambar-200: #F3D4A9; --ambar-300: #E9C28C; --ambar-400: #E3A33F; --ambar-500: #BA7F11; --ambar-600: #8F5A0E; --ambar-700: #6C4700; --ambar-800: #583900; --ambar-900: #402800; --ambar-950: #271700; /* Verde agua — secundario (enlaces, gráficos, apoyo) */ --agua-50: #EAFBF9; --agua-100: #DBF3F0; --agua-200: #BEE2DE; --agua-300: #96C9C5; --agua-400: #6EAFAA; --agua-500: #489590; --agua-600: #2F7F7A; --agua-700: #0E625E; --agua-800: #004A47; --agua-900: #003633; --agua-950: #00201E; /* Niebla — grises con matiz petróleo */ --niebla-50: #F2F5F5; --niebla-100: #E6ECED; --niebla-200: #D2DBDD; --niebla-300: #B7BFC1; --niebla-400: #9BA3A5; --niebla-500: #80888A; --niebla-600: #666D6F; --niebla-700: #4F5758; --niebla-800: #3A4143; --niebla-900: #282F31; --niebla-950: #151C1D; /* Éxito */ --exito-50: #E9FCF3; --exito-100: #DAF4E7; --exito-200: #BDE4D1; --exito-300: #95CCB3; --exito-400: #6DB294; --exito-500: #469877; --exito-600: #1F7A5A; --exito-700: #086548; --exito-800: #004C35; --exito-900: #003726; --exito-950: #002115; /* Alerta */ --alerta-50: #FFF4F1; --alerta-100: #FFE7DF; --alerta-200: #FFCCBB; --alerta-300: #F6A78E; --alerta-400: #E48466; --alerta-500: #CD6340; --alerta-600: #B0451F; --alerta-700: #92300A; --alerta-800: #712000; --alerta-900: #541500; --alerta-950: #340A00; /* Error */ --error-50: #FFF4F2; --error-100: #FFE6E2; --error-200: #FFCBC2; --error-300: #FFA193; --error-400: #ED7C6C; --error-500: #D65848; --error-600: #B42318; --error-700: #9A2218; --error-800: #78120A; --error-900: #5A0804; --error-950: #380402; /* ---------- ROLES (modo claro) ---------- */ --demma-fondo: var(--niebla-50); /* fondo de página */ --demma-superficie: #FFFFFF; /* tarjetas, formularios */ --demma-superficie-2: var(--niebla-100); /* zonas secundarias */ --demma-borde: var(--niebla-200); --demma-borde-fuerte: var(--niebla-400); --demma-texto: var(--petroleo-950); /* texto principal */ --demma-texto-suave: var(--niebla-700); /* texto secundario (≥ 4.5:1 en todo fondo claro) */ --demma-marca: var(--petroleo-900); /* logo, títulos, botón principal */ --demma-marca-hover: var(--petroleo-800); --demma-sobre-marca: #FFFFFF; /* texto sobre --demma-marca */ --demma-acento: var(--ambar-400); /* relleno: 1 botón destacado */ --demma-sobre-acento: var(--ambar-950); /* texto sobre --demma-acento */ --demma-acento-texto: var(--ambar-600); /* ámbar como texto (≥ 4.5:1) */ --demma-secundario: var(--agua-700); /* enlaces y texto secundario de color */ --demma-secundario-suave: var(--agua-100); --demma-banda: var(--petroleo-900); /* franjas oscuras */ --demma-sobre-banda: var(--niebla-50); --demma-sobre-banda-suave:var(--petroleo-300); --demma-exito: var(--exito-600); --demma-exito-suave: var(--exito-100); --demma-alerta: var(--alerta-700); --demma-alerta-suave: var(--alerta-100); --demma-error: var(--error-600); --demma-error-suave: var(--error-100); --demma-foco: var(--ambar-400); /* Tipografía de marca */ --demma-fuente-titulos: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --demma-fuente-texto: "Public Sans", "Segoe UI", system-ui, sans-serif; --demma-fuente-datos: "IBM Plex Mono", ui-monospace, Consolas, monospace; } /* ---------- ROLES (modo oscuro) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --demma-fondo: #08161B; --demma-superficie: #0F2127; --demma-superficie-2: #192C33; --demma-borde: #293B42; --demma-borde-fuerte: var(--petroleo-600); --demma-texto: var(--niebla-50); --demma-texto-suave: var(--niebla-300); --demma-marca: var(--petroleo-100); --demma-marca-hover: var(--petroleo-50); --demma-sobre-marca: var(--petroleo-950); --demma-acento: var(--ambar-400); --demma-sobre-acento: var(--ambar-950); --demma-acento-texto: var(--ambar-300); --demma-secundario: var(--agua-300); --demma-secundario-suave: #10332F; --demma-banda: #050F12; --demma-sobre-banda: var(--niebla-50); --demma-sobre-banda-suave:var(--petroleo-300); --demma-exito: var(--exito-300); --demma-exito-suave: #0E2E22; --demma-alerta: var(--alerta-300); --demma-alerta-suave: #3A1A0E; --demma-error: var(--error-300); --demma-error-suave: #3A1311; --demma-foco: var(--ambar-400); } } :root[data-theme="dark"] { --demma-fondo: #08161B; --demma-superficie: #0F2127; --demma-superficie-2: #192C33; --demma-borde: #293B42; --demma-borde-fuerte: var(--petroleo-600); --demma-texto: var(--niebla-50); --demma-texto-suave: var(--niebla-300); --demma-marca: var(--petroleo-100); --demma-marca-hover: var(--petroleo-50); --demma-sobre-marca: var(--petroleo-950); --demma-acento: var(--ambar-400); --demma-sobre-acento: var(--ambar-950); --demma-acento-texto: var(--ambar-300); --demma-secundario: var(--agua-300); --demma-secundario-suave: #10332F; --demma-banda: #050F12; --demma-sobre-banda: var(--niebla-50); --demma-sobre-banda-suave:var(--petroleo-300); --demma-exito: var(--exito-300); --demma-exito-suave: #0E2E22; --demma-alerta: var(--alerta-300); --demma-alerta-suave: #3A1A0E; --demma-error: var(--error-300); --demma-error-suave: #3A1311; --demma-foco: var(--ambar-400); }