/* ================================================================ themes.css — TEMAS de Samira DBO (paletas + modo oscuro) GENERADO por gen-themes.mjs (no editar a mano; regenerar). Cargar DESPUÉS de app.css. Redefine los tokens shadcn/HSL del :root. lleva: data-palette="petroleo|indigo|marino|ciruela|coral|grafito|esmeralda|ambar|borgona" data-mode="dark" (ausencia = claro) Sin data-palette = azul DBO actual (el :root de app.css). Sin data-mode = claro. ================================================================ */ /* ===== Paletas (modo claro) ===== */ /* Azul DBO (el azul Fluent original; el default ahora es "Samira" marino+oro en :root de app.css). */ :root[data-palette="azul"]{ --background:0 0% 91%; --foreground:30 2% 19%; --card:0 0% 100%; --card-foreground:30 2% 19%; --popover:0 0% 100%; --popover-foreground:30 2% 19%; --primary:206 100% 42%; --primary-foreground:0 0% 100%; --primary-light:206 100% 55%; --primary-glow:206 100% 42%; --secondary:30 6% 95%; --secondary-foreground:30 2% 19%; --muted:30 6% 95%; --muted-foreground:30 2% 37%; --accent:206 100% 42%; --accent-foreground:0 0% 100%; --border:30 5% 82%; --input:30 5% 82%; --ring:206 100% 42%; } :root[data-palette="petroleo"]{ --background:38 50% 97%; --foreground:170 17% 14%; --card:0 0% 100%; --card-foreground:170 17% 14%; --popover:0 0% 100%; --popover-foreground:170 17% 14%; --primary:173 76% 25%; --primary-foreground:0 0% 100%; --primary-light:173 76% 35%; --primary-glow:173 76% 25%; --secondary:42 26% 93%; --secondary-foreground:170 17% 14%; --muted:42 26% 93%; --muted-foreground:153 5% 44%; --accent:173 76% 25%; --accent-foreground:0 0% 100%; --border:36 26% 89%; --input:36 26% 89%; --ring:173 76% 25%; } :root[data-palette="indigo"]{ --background:240 38% 97%; --foreground:249 26% 14%; --card:0 0% 100%; --card-foreground:249 26% 14%; --popover:0 0% 100%; --popover-foreground:249 26% 14%; --primary:243 75% 59%; --primary-foreground:0 0% 100%; --primary-light:243 75% 69%; --primary-glow:243 75% 59%; --secondary:249 50% 95%; --secondary-foreground:249 26% 14%; --muted:249 50% 95%; --muted-foreground:248 10% 45%; --accent:243 75% 59%; --accent-foreground:0 0% 100%; --border:251 27% 92%; --input:251 27% 92%; --ring:243 75% 59%; } :root[data-palette="marino"]{ --background:204 29% 97%; --foreground:209 37% 12%; --card:0 0% 100%; --card-foreground:209 37% 12%; --popover:0 0% 100%; --popover-foreground:209 37% 12%; --primary:208 68% 22%; --primary-foreground:0 0% 100%; --primary-light:208 68% 32%; --primary-glow:208 68% 22%; --secondary:205 33% 93%; --secondary-foreground:209 37% 12%; --muted:205 33% 93%; --muted-foreground:206 14% 41%; --accent:208 68% 22%; --accent-foreground:0 0% 100%; --border:205 25% 91%; --input:205 25% 91%; --ring:208 68% 22%; } :root[data-palette="ciruela"]{ --background:300 29% 97%; --foreground:296 22% 13%; --card:0 0% 100%; --card-foreground:296 22% 13%; --popover:0 0% 100%; --popover-foreground:296 22% 13%; --primary:299 30% 33%; --primary-foreground:0 0% 100%; --primary-light:299 30% 43%; --primary-glow:299 30% 33%; --secondary:294 28% 93%; --secondary-foreground:296 22% 13%; --muted:294 28% 93%; --muted-foreground:291 7% 41%; --accent:299 30% 33%; --accent-foreground:0 0% 100%; --border:294 21% 91%; --input:294 21% 91%; --ring:299 30% 33%; } :root[data-palette="coral"]{ --background:22 57% 97%; --foreground:17 27% 13%; --card:0 0% 100%; --card-foreground:17 27% 13%; --popover:0 0% 100%; --popover-foreground:17 27% 13%; --primary:13 67% 54%; --primary-foreground:0 0% 100%; --primary-light:13 67% 64%; --primary-glow:13 67% 54%; --secondary:20 57% 93%; --secondary-foreground:17 27% 13%; --muted:20 57% 93%; --muted-foreground:18 10% 43%; --accent:13 67% 54%; --accent-foreground:0 0% 100%; --border:21 40% 90%; --input:21 40% 90%; --ring:13 67% 54%; } :root[data-palette="grafito"]{ --background:220 18% 97%; --foreground:212 21% 14%; --card:0 0% 100%; --card-foreground:212 21% 14%; --popover:0 0% 100%; --popover-foreground:212 21% 14%; --primary:214 21% 31%; --primary-foreground:0 0% 100%; --primary-light:214 21% 41%; --primary-glow:214 21% 31%; --secondary:214 20% 93%; --secondary-foreground:212 21% 14%; --muted:214 20% 93%; --muted-foreground:213 10% 44%; --accent:214 21% 31%; --accent-foreground:0 0% 100%; --border:218 17% 91%; --input:218 17% 91%; --ring:214 21% 31%; } :root[data-palette="esmeralda"]{ --background:146 47% 97%; --foreground:153 33% 11%; --card:0 0% 100%; --card-foreground:153 33% 11%; --popover:0 0% 100%; --popover-foreground:153 33% 11%; --primary:160 84% 34%; --primary-foreground:0 0% 100%; --primary-light:160 84% 44%; --primary-glow:160 84% 34%; --secondary:150 41% 93%; --secondary-foreground:153 33% 11%; --muted:150 41% 93%; --muted-foreground:150 10% 41%; --accent:160 84% 34%; --accent-foreground:0 0% 100%; --border:150 36% 90%; --input:150 36% 90%; --ring:160 84% 34%; } :root[data-palette="ambar"]{ --background:42 63% 97%; --foreground:34 38% 12%; --card:0 0% 100%; --card-foreground:34 38% 12%; --popover:0 0% 100%; --popover-foreground:34 38% 12%; --primary:36 74% 40%; --primary-foreground:0 0% 100%; --primary-light:36 74% 50%; --primary-glow:36 74% 40%; --secondary:41 52% 92%; --secondary-foreground:34 38% 12%; --muted:41 52% 92%; --muted-foreground:38 16% 40%; --accent:36 74% 40%; --accent-foreground:0 0% 100%; --border:41 47% 88%; --input:41 47% 88%; --ring:36 74% 40%; } :root[data-palette="borgona"]{ --background:348 38% 97%; --foreground:333 27% 13%; --card:0 0% 100%; --card-foreground:333 27% 13%; --popover:0 0% 100%; --popover-foreground:333 27% 13%; --primary:345 52% 39%; --primary-foreground:0 0% 100%; --primary-light:345 52% 49%; --primary-glow:345 52% 39%; --secondary:342 37% 93%; --secondary-foreground:333 27% 13%; --muted:342 37% 93%; --muted-foreground:341 10% 42%; --accent:345 52% 39%; --accent-foreground:0 0% 100%; --border:341 31% 90%; --input:341 31% 90%; --ring:345 52% 39%; } /* ===== Modo oscuro: shell neutro compartido + marca "Samira" (marino) por defecto ===== */ :root[data-mode="dark"]{ --background:214 22% 10%; --foreground:186 14% 93%; --card:215 16% 16%; --card-foreground:186 14% 93%; --popover:215 16% 16%; --popover-foreground:186 14% 93%; --secondary:214 13% 23%; --secondary-foreground:186 14% 93%; --muted:214 13% 23%; --muted-foreground:205 10% 66%; --border:214 12% 30%; --input:214 12% 30%; --primary:214 62% 56%; --primary-foreground:0 0% 100%; /* Samira: marino más brillante en oscuro */ --primary-light:214 62% 66%; --primary-glow:214 62% 56%; --accent:214 62% 56%; --accent-foreground:0 0% 100%; --ring:214 62% 56%; --success:145 52% 56%; --success-foreground:150 40% 10%; --success-light:158 45% 14%; --danger:8 78% 70%; --danger-foreground:8 40% 12%; --danger-light:8 40% 18%; --destructive:8 78% 70%; --destructive-foreground:8 40% 12%; --warning:38 80% 65%; --warning-foreground:38 60% 12%; } /* ===== Marca por paleta en modo oscuro ===== */ :root[data-mode="dark"][data-palette="azul"]{ --primary:207 74% 52%; --primary-foreground:0 0% 100%; --primary-light:207 74% 64%; --primary-glow:207 74% 52%; --accent:207 74% 52%; --accent-foreground:0 0% 100%; --ring:207 74% 52%; } :root[data-mode="dark"][data-palette="petroleo"]{ --primary:172 76% 35%; --primary-foreground:0 0% 100%; --primary-light:172 76% 45%; --primary-glow:172 76% 35%; --accent:172 76% 35%; --accent-foreground:0 0% 100%; --ring:172 76% 35%; } :root[data-mode="dark"][data-palette="indigo"]{ --primary:243 82% 67%; --primary-foreground:0 0% 100%; --primary-light:243 82% 77%; --primary-glow:243 82% 67%; --accent:243 82% 67%; --accent-foreground:0 0% 100%; --ring:243 82% 67%; } :root[data-mode="dark"][data-palette="marino"]{ --primary:205 57% 42%; --primary-foreground:0 0% 100%; --primary-light:205 57% 52%; --primary-glow:205 57% 42%; --accent:205 57% 42%; --accent-foreground:0 0% 100%; --ring:205 57% 42%; } :root[data-mode="dark"][data-palette="ciruela"]{ --primary:299 28% 47%; --primary-foreground:0 0% 100%; --primary-light:299 28% 57%; --primary-glow:299 28% 47%; --accent:299 28% 47%; --accent-foreground:0 0% 100%; --ring:299 28% 47%; } :root[data-mode="dark"][data-palette="coral"]{ --primary:14 70% 59%; --primary-foreground:0 0% 100%; --primary-light:14 70% 69%; --primary-glow:14 70% 59%; --accent:14 70% 59%; --accent-foreground:0 0% 100%; --ring:14 70% 59%; } :root[data-mode="dark"][data-palette="grafito"]{ --primary:212 17% 43%; --primary-foreground:0 0% 100%; --primary-light:212 17% 53%; --primary-glow:212 17% 43%; --accent:212 17% 43%; --accent-foreground:0 0% 100%; --ring:212 17% 43%; } :root[data-mode="dark"][data-palette="esmeralda"]{ --primary:161 78% 40%; --primary-foreground:0 0% 100%; --primary-light:161 78% 50%; --primary-glow:161 78% 40%; --accent:161 78% 40%; --accent-foreground:0 0% 100%; --ring:161 78% 40%; } :root[data-mode="dark"][data-palette="ambar"]{ --primary:40 69% 54%; --primary-foreground:0 0% 100%; --primary-light:40 69% 64%; --primary-glow:40 69% 54%; --accent:40 69% 54%; --accent-foreground:0 0% 100%; --ring:40 69% 54%; } :root[data-mode="dark"][data-palette="borgona"]{ --primary:345 46% 55%; --primary-foreground:0 0% 100%; --primary-light:345 46% 65%; --primary-glow:345 46% 55%; --accent:345 46% 55%; --accent-foreground:0 0% 100%; --ring:345 46% 55%; } /* ===== Componentes en modo oscuro (glass / mesh / sombras) ===== */ :root[data-mode="dark"] .glass{ background:hsl(215 16% 16%); border-color:hsl(214 12% 30%); box-shadow:0 8px 30px rgba(0,0,0,.45); } :root[data-mode="dark"] .glass-strong{ background:hsl(215 16% 18%); border-color:hsl(214 12% 34%); box-shadow:0 8px 30px rgba(0,0,0,.5); } :root[data-mode="dark"] .gradient-mesh{ background: radial-gradient(at 0% 0%, hsla(205,55%,50%,.05) 0px, transparent 50%), radial-gradient(at 100% 100%, hsla(190,45%,45%,.04) 0px, transparent 50%); } :root[data-mode="dark"] .hover-lift:hover{ box-shadow:0 10px 30px rgba(0,0,0,.5); }