/** * SUMAS Theme for DaisyUI 4 * * Sistema Universitario para la Mejora de Alimentación, Sueño y Salud * Concepto: "Templado primaveral mediterráneo" * * Colores principales: * - Primary: Verde Bosque #2D5A4A * - Secondary: Terracota Profundo #A2663C (WCAG AA) * - Accent: Terracota Claro #E8A87C * - Base: Crema cálido #FAF8F5 * * Accesibilidad: Todos los colores cumplen WCAG AA (ratio ≥ 4.5:1) * * Formato: OKLCH (lightness chroma hue) - lightness en decimal 0-1 */ [data-theme="sumas"] { color-scheme: light; /* ============================================ PRIMARY: Verde Bosque #2D5A4A ============================================ */ --p: 0.4473 0.06 163.51; --pf: 0.38 0.05 163.51; --pc: 1 0 0; /* ============================================ SECONDARY: Terracota Profundo #A2663C (Corregido para WCAG AA - ratio 4.66:1) ============================================ */ --s: 0.57 0.10 54; --sf: 0.51 0.08 54; --sc: 1 0 0; /* ============================================ ACCENT: Terracota Claro #E8A87C ============================================ */ --a: 0.76 0.1 55; --af: 0.70 0.1 55; --ac: 0.30 0.02 55; /* ============================================ NEUTRAL: Gris Cálido #5C5650 ============================================ */ --n: 0.42 0.02 60; --nf: 0.35 0.02 60; --nc: 0.97 0.01 90; /* ============================================ BASE: Crema / Arena (Fondos) ============================================ */ --b1: 0.98 0.01 90; --b2: 0.95 0.015 85; --b3: 0.92 0.02 80; --bc: 0.28 0.02 60; /* ============================================ ESTADOS SEMÁNTICOS (Corregidos para WCAG AA - todos ≥4.5:1) ============================================ */ --su: 0.55 0.12 163; /* #0B855C - ratio 4.64:1 */ --suc: 1 0 0; --wa: 0.57 0.13 59; /* #B16104 - ratio 4.58:1 */ --wac: 1 0 0; --er: 0.58 0.17 28; /* #CA493E - ratio 4.63:1 */ --erc: 1 0 0; --in: 0.4473 0.06 163.51; --inc: 1 0 0; /* ============================================ BORDES Y RADIOS ============================================ */ --rounded-box: 0.5rem; --rounded-btn: 0.5rem; --rounded-badge: 9999px; --animation-btn: 0.25s; --animation-input: 0.2s; --btn-focus-scale: 0.98; } /* ================================================ TIPOGRAFÍA ================================================ */ [data-theme="sumas"] { font-family: 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, sans-serif; } [data-theme="sumas"] h1, [data-theme="sumas"] h2, [data-theme="sumas"] h3, [data-theme="sumas"] h4, [data-theme="sumas"] h5, [data-theme="sumas"] h6, [data-theme="sumas"] .card-title, [data-theme="sumas"] .font-heading { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; } /* ================================================ CLASES UTILITARIAS SUMAS ================================================ */ /* Sombras con tono cálido */ .shadow-sumas-sm { box-shadow: 0 1px 2px 0 rgb(61 56 51 / 0.05); } .shadow-sumas-md { box-shadow: 0 4px 6px -1px rgb(61 56 51 / 0.07), 0 2px 4px -2px rgb(61 56 51 / 0.05); } .shadow-sumas-lg { box-shadow: 0 10px 15px -3px rgb(61 56 51 / 0.08), 0 4px 6px -4px rgb(61 56 51 / 0.05); } /* Sistema semáforo Mini-ECCA (WCAG AA) */ .semaforo-adecuado { background-color: oklch(0.55 0.12 163); /* Success corregido */ color: white; } .semaforo-mejora { background-color: oklch(0.57 0.13 59); /* Warning corregido */ color: white; } .semaforo-inadecuado { background-color: oklch(0.58 0.17 28); /* Error corregido */ color: white; } /* ================================================ TEMA OSCURO: sumas-dark Mediterráneo nocturno - cálido pero oscuro ================================================ */ [data-theme="sumas-dark"] { color-scheme: dark; /* ============================================ PRIMARY: Verde Bosque Luminoso #4A9080 (Más brillante para contraste en fondo oscuro) ============================================ */ --p: 0.58 0.08 165; --pf: 0.52 0.07 165; --pc: 0.15 0.02 165; /* ============================================ SECONDARY: Terracota Luminoso #D4875A ============================================ */ --s: 0.67 0.12 55; --sf: 0.60 0.11 55; --sc: 0.20 0.02 55; /* ============================================ ACCENT: Terracota Suave #E8A87C ============================================ */ --a: 0.76 0.1 55; --af: 0.70 0.1 55; --ac: 0.20 0.02 55; /* ============================================ NEUTRAL: Piedra Clara #A8A29E ============================================ */ --n: 0.70 0.01 60; --nf: 0.60 0.01 60; --nc: 0.15 0.01 60; /* ============================================ BASE: Piedra Oscura Cálida (Fondos) #1C1917, #292524, #3D3733 ============================================ */ --b1: 0.15 0.01 50; /* Fondo principal */ --b2: 0.20 0.01 50; /* Cards, secciones */ --b3: 0.28 0.01 50; /* Bordes, hover */ --bc: 0.96 0.01 90; /* Texto principal (crema claro) */ /* ============================================ ESTADOS SEMÁNTICOS (más brillantes para dark) ============================================ */ --su: 0.65 0.20 145; /* Verde brillante */ --suc: 0.15 0.02 145; --wa: 0.70 0.17 70; /* Ámbar brillante */ --wac: 0.15 0.02 70; --er: 0.62 0.22 25; /* Rojo brillante */ --erc: 1 0 0; --in: 0.58 0.08 165; /* Info = primary */ --inc: 0.15 0.02 165; /* ============================================ BORDES Y RADIOS (iguales que light) ============================================ */ --rounded-box: 0.5rem; --rounded-btn: 0.5rem; --rounded-badge: 9999px; --animation-btn: 0.25s; --animation-input: 0.2s; --btn-focus-scale: 0.98; } /* Tipografía para dark mode */ [data-theme="sumas-dark"] { font-family: 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, sans-serif; } [data-theme="sumas-dark"] h1, [data-theme="sumas-dark"] h2, [data-theme="sumas-dark"] h3, [data-theme="sumas-dark"] h4, [data-theme="sumas-dark"] h5, [data-theme="sumas-dark"] h6, [data-theme="sumas-dark"] .card-title, [data-theme="sumas-dark"] .font-heading { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; } /* Sombras para dark mode (más sutiles) */ [data-theme="sumas-dark"] .shadow-sumas-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3); } [data-theme="sumas-dark"] .shadow-sumas-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); } [data-theme="sumas-dark"] .shadow-sumas-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4); }