/* ============================================================= LIGHT THEME — overrides scoped a [data-theme="light"] styles.css (tema oscuro) queda intacto: el sistema de color está tokenizado, así que el tema claro redefine 5 variables + voltea los pocos rgba(255,255,255,·) hardcodeados. Incluye el toggle. Nació del experimento index-light.html (2026-07-15). ============================================================= */ /* ---- Tokens del tema claro ---- */ :root[data-theme="light"] { --color-bg: #f1ede4; /* blanco hueso, cálido */ --color-text: #1c1a16; /* tinta casi-negra cálida */ --color-text-nav: #5d5645; /* nav (links + logo + toggle) — Figma 2026-10 */ --color-cream: #26231c; /* heading de apps → tinta oscura */ --color-white: #1c1a16; /* usado como "tinta" en bordes/labels/fills */ } /* Transición suave al alternar tema */ :root[data-theme="light"] body, :root[data-theme="light"] .nav, :root[data-theme="light"] .contact-drawer { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ---- Nav al hacer scroll (rgba oscuro → hueso) ---- */ [data-theme="light"] .nav--scrolled { background-color: rgba(241, 237, 228, 0.85); } /* ---- Glow del hero (blanco invisible sobre hueso → tibio) ---- */ [data-theme="light"] .hero__glow { display: none; /* el diseño claro no lleva halo */ } /* ---- Folders: vidrio claro esmerilado + sombra centrada (0/0) ---- La sombra NO puede ir en .folder__bg (su clip-path la recorta) ni como filter en .folder (un filter en el padre vuelve "backdrop root" al folder y el blur del vidrio deja ver el borde duro de la imagen). Va en un ::before detrás, con la misma silueta (#folder-shape) como fondo SVG + drop-shadow. */ [data-theme="light"] .folder__bg { background: rgba(255, 255, 255, 0.26); } [data-theme="light"] .folder__bg > svg path { fill: #ffffff; fill-opacity: 0.22; } [data-theme="light"] .folder::before { content: ''; position: absolute; inset: 10px; /* = padding de .folder → misma caja que .folder__bg */ z-index: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath fill='%23f1ede4' d='M0 0.083 L0 0.889 C0 0.950 0.043 1 0.095 1 L0.905 1 C0.957 1 1 0.950 1 0.889 L1 0.278 C1 0.216 0.957 0.167 0.905 0.167 L0.548 0.167 C0.514 0.167 0.483 0.146 0.465 0.111 C0.448 0.077 0.417 0.056 0.383 0.056 L0.060 0.056 C0.029 0.056 0 0.089 0 0.125 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: drop-shadow(0 0 2px rgba(20, 18, 14, 0.14)) drop-shadow(0 0 12px rgba(20, 18, 14, 0.06)); } /* ---- Visuals: en claro solo los folders llevan sombra ---- */ [data-theme="light"] .visuals-img { box-shadow: none; } /* La flechita "Explore" del label venía con stroke="white" en el HTML */ [data-theme="light"] .folder__label svg path { stroke: #1c1a16; } /* ---- App icons de logo claro: mantener chip claro sobre hueso ---- */ [data-theme="light"] .app-icon--light { background-color: #ffffff; border: 1px solid rgba(20, 18, 14, 0.08); } /* ---- Contact drawer: voltear los rgba blancos a tinta ---- */ [data-theme="light"] .contact-drawer { border-left-color: rgba(20, 18, 14, 0.14); } [data-theme="light"] .contact-drawer__close { border-color: rgba(20, 18, 14, 0.28); } [data-theme="light"] .contact-drawer__close:hover { background-color: rgba(20, 18, 14, 0.06); border-color: rgba(20, 18, 14, 0.5); } [data-theme="light"] .contact-drawer__label { color: rgba(20, 18, 14, 0.45); } [data-theme="light"] .contact-drawer__body { color: rgba(20, 18, 14, 0.55); } [data-theme="light"] .contact-drawer__divider { background: rgba(20, 18, 14, 0.12); } [data-theme="light"] .contact-drawer__action { border-color: rgba(20, 18, 14, 0.4); } /* La franja teal del ripple queda igual (acento de marca) pero su texto sobre el gradiente oscuro debe leerse claro mientras el ripple está activo */ [data-theme="light"] .contact-drawer--flash .contact-drawer__label, [data-theme="light"] .contact-drawer--flash .contact-drawer__body { color: rgba(255, 255, 255, 0.65); } [data-theme="light"] .contact-drawer--flash .contact-drawer__heading, [data-theme="light"] .contact-drawer--flash .contact-drawer__action, [data-theme="light"] .contact-drawer--flash .contact-drawer__close { color: #f5f5f5; border-color: rgba(255, 255, 255, 0.5); } /* ============================================================= TOGGLE DE TEMA — botón en el nav ============================================================= */ .theme-toggle { width: clamp(38px, 3vw, 46px); height: clamp(38px, 3vw, 46px); border-radius: 50%; border: 1px solid currentColor; background: none; color: var(--color-text-nav); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: background-color 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-toggle:hover { transform: rotate(18deg) scale(1.06); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: clamp(16px, 1.4vw, 20px); height: auto; display: block; } /* Un solo botón, dos íconos: mostramos el del tema AL QUE se va */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ============================================================= WORK PAGE (work.html) — voltear los colores fijos de work.css Lo que ya usa tokens (--color-white, --color-text) se resuelve solo. Los botones prev/next y el CTA verde van sobre imagen/gradiente: se quedan como en oscuro a propósito. ============================================================= */ [data-theme="light"] .work-container, [data-theme="light"] .work-sidebar, [data-theme="light"] .work-list, [data-theme="light"] .work-persona { border-color: rgba(20, 18, 14, 0.18); } [data-theme="light"] .work-category--active, [data-theme="light"] .work-list-item--active { background-color: rgba(20, 18, 14, 0.08); } [data-theme="light"] .work-list-item:hover:not(.work-list-item--active) { background-color: rgba(20, 18, 14, 0.04); } [data-theme="light"] .work-list-item__tag { color: #f1ede4; border-color: transparent; } [data-theme="light"] .work-img, [data-theme="light"] .work-video, [data-theme="light"] .work-feed-slide { background: #e6e1d6; } [data-theme="light"] .work-placeholder { border-color: rgba(20, 18, 14, 0.1); background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(20, 18, 14, 0.03) 0%, transparent 100%); } [data-theme="light"] .work-placeholder__heading { color: rgba(20, 18, 14, 0.7); } [data-theme="light"] .work-placeholder__text { color: rgba(20, 18, 14, 0.4); } [data-theme="light"] .work-placeholder__cta { color: rgba(20, 18, 14, 0.6); border-color: rgba(20, 18, 14, 0.2); } [data-theme="light"] .work-placeholder__cta:hover { color: #1c1a16; border-color: rgba(20, 18, 14, 0.5); } [data-theme="light"] .work-info__title, [data-theme="light"] .work-info__body, [data-theme="light"] .work-info__role, [data-theme="light"] .work-feed-info__title, [data-theme="light"] .work-persona__heading, [data-theme="light"] .work-persona__quote, [data-theme="light"] .work-persona__objectives-title, [data-theme="light"] .work-persona__stat-value, [data-theme="light"] .work-persona__stat-label, [data-theme="light"] .work-persona__audit-icon { color: #1c1a16; } [data-theme="light"] .work-info__quote, [data-theme="light"] .work-feed-info__desc { color: rgba(28, 26, 22, 0.72); } [data-theme="light"] .work-duo { border-color: rgba(20, 18, 14, 0.12); background: rgba(20, 18, 14, 0.03); } [data-theme="light"] .work-persona__divider { background: rgba(20, 18, 14, 0.2); } [data-theme="light"] .work-persona__tag { background: #1c1a16; color: #f1ede4; } [data-theme="light"] .work-persona__stat--audit { border-left-color: rgba(20, 18, 14, 0.6); } [data-theme="light"] .work-feed-item { border-bottom-color: rgba(20, 18, 14, 0.12); } [data-theme="light"] .work-feed-dot { background: #1c1a16; } /* Íconos de carpeta: tinta pura pesaba demasiado → el tono del nav */ [data-theme="light"] .work-category__icon { color: #5d5645; } /* ============================================================= HIRO (hiro.html) — los colores fijos viven en el