/* auth-light-mode.css — Modo claro MONOCROMÁTICO para auth (login + signup + verify). * * Inspirado en Linear / Vercel / Apple: paleta de grises puros + acento negro, * sin matices de purple/cyan. El user pidió "algo más monocromático" — esta hoja * lo logra mientras CONSERVA las capas de fondo (partículas, glow, grain) y los * card-to-card connectors. Solo se cambia el COLOR de esos efectos a tonos * neutros, no se eliminan. * * Carga DESPUÉS de auth-design.css y solo activa con clase `auth-theme-light` * en el . Para volver al dark mode, quitar la clase. */ body.auth-theme-light { /* tokens monocromáticos — escala Zinc/Tailwind con contraste bumpeado basado en feedback iterativo de Claude Design. text-2 sube de #525252 (ratio ~5.7) a #404040 (ratio ~9.2) para mejor legibilidad de subtitle y labels. */ --bg: #fafafa; /* zinc-50 */ --surface: rgba(255, 255, 255, 0.94); /* card surface */ --surface-2: rgba(244, 244, 245, 0.86); --border: rgba(10, 10, 10, 0.10); /* 8% → 10% para card border visible */ --border-strong: rgba(10, 10, 10, 0.18); --text: #0a0a0a; --text-2: #404040; /* bumped 525252 → 404040 (contraste) */ --muted: #a3a3a3; --accent-a: #0a0a0a; --accent-b: #404040; --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -12px rgba(10, 10, 10, 0.10), 0 1px 0 rgba(255, 255, 255, 0.55) inset; --success: #0a0a0a; --success-glow: rgba(10, 10, 10, 0.10); --error: #404040; --error-glow: rgba(10, 10, 10, 0.08); color: var(--text); background: var(--bg); } body.auth-theme-light::selection, body.auth-theme-light *::selection { background: rgba(10, 10, 10, 0.12); color: #0a0a0a; } /* ───────── background layers (mantenidos, recoloreados) ───────── */ /* glow ambient: dos manchas radiales muy diluidas neutras — siguen drifteando pero ya no se leen como color, solo como variación tonal. */ body.auth-theme-light .bg-glow { opacity: 0.5; } body.auth-theme-light .bg-glow::before { background: radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.06) 0%, rgba(10, 10, 10, 0) 60%); } body.auth-theme-light .bg-glow::after { background: radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.04) 0%, rgba(10, 10, 10, 0) 60%); } /* grain: dots monocromáticos como mood texture */ body.auth-theme-light .bg-grain { background-image: radial-gradient(rgba(10, 10, 10, 0.05) 1px, transparent 1px); mix-blend-mode: multiply; opacity: 0.55; } /* ───────── card (softer integration con el background) ───────── Border muy sutil para que el card se sienta integrado con la pared, no "cajeado". Confiamos en el shadow + backdrop-blur para definir la forma, no en una línea pesada. */ body.auth-theme-light .auth-card { background: /* dot pattern interno extremadamente sutil (1.4% opacity) */ radial-gradient(rgba(10, 10, 10, 0.014) 1px, transparent 1px) 0 0 / 14px 14px, rgba(255, 255, 255, 0.88); border: 1px solid rgba(10, 10, 10, 0.05); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.025), 0 12px 32px -16px rgba(10, 10, 10, 0.08); } /* highlight superior muy sutil — apenas perceptible */ body.auth-theme-light .auth-card::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 30%); } /* ───────── brand pill (mono text, sin pill background) ───────── Basado en design refinado: solo texto mono uppercase con diamante negro, sin border ni background. Más limpio, menos ruido visual. */ body.auth-theme-light .brand-pill { background: transparent; border-color: transparent; color: var(--text-2); padding: 4px 10px 4px 0; font-size: 10.5px; letter-spacing: 0.16em; font-weight: 500; } /* Diamante negro sólido (rotate 45 + border-radius 1) */ body.auth-theme-light .brand-pill .gd { background: #0a0a0a; box-shadow: none; border-radius: 1px; transform: rotate(45deg); width: 6px; height: 6px; } /* slogan: weight 450 + letter-spacing -0.01em + sin itálica + color medium */ body.auth-theme-light .slogan { background: none; -webkit-text-fill-color: var(--text-2); color: var(--text-2); font-style: normal; font-weight: 450; letter-spacing: -0.01em; } /* H1: weight 550 + tighter tracking (-0.03em) */ body.auth-theme-light .h1 { font-weight: 550; font-variation-settings: 'wght' 550; letter-spacing: -0.03em; line-height: 1.12; color: var(--text); } body.auth-theme-light .sub { color: var(--text-2); letter-spacing: -0.01em; line-height: 1.5; } /* ───────── tabs segmented + GSAP pill indicator ───────── */ body.auth-theme-light .tabs { background: #f4f4f4; border-color: transparent; height: 40px; padding: 4px; } /* Pill indicator (inserted by auth-fx.js GSAP polish) — se desliza entre tabs. border-radius 8px, sombra suave 0 1px 3px rgba(10,10,10,0.10). */ body.auth-theme-light .tabs .tab-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: #ffffff; border: 1px solid #d4d4d4; border-radius: 8px; box-shadow: 0 1px 3px rgba(10, 10, 10, 0.10); z-index: 0; pointer-events: none; will-change: transform, width; } /* Cuando hay pill GSAP activo, el background del tab activo se oculta para que el pill sea la única indicación visual deslizante. */ body.auth-theme-light.gsap-ready .tab[aria-selected="true"] { background: transparent; box-shadow: none; } body.auth-theme-light .tab { color: var(--muted); font-weight: 500; } body.auth-theme-light .tab:hover { color: var(--text-2); } body.auth-theme-light .tab[aria-selected="true"] { background: #ffffff; color: var(--text); box-shadow: 0 0 0 1px #d4d4d4, 0 1px 3px rgba(10, 10, 10, 0.10); border-radius: 8px; } body.auth-theme-light .tab.is-energize, body.auth-theme-light .tab.is-receive { color: var(--text) !important; } /* ───────── form inputs ───────── Bumpeado del design refinado: border #d4d4d4 visible, hover #a3a3a3, focus anillo 3px rgba(10,10,10,0.12) que se expande con transition 180ms. */ body.auth-theme-light .input { height: 48px; background: #ffffff; border: 1px solid #d4d4d4; color: var(--text); transition: border-color 180ms ease-out, box-shadow 180ms ease-out; box-shadow: 0 0 0 0 rgba(10, 10, 10, 0); } body.auth-theme-light .input::placeholder { color: var(--muted); } body.auth-theme-light .input:hover { border-color: #a3a3a3; } body.auth-theme-light .input:focus { background: #ffffff; border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12); } body.auth-theme-light .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 500; } /* ───────── botón primary: black solid (Vercel/Linear feel) hover bumped a #262626 (más contraste vs #171717 previo). */ body.auth-theme-light .btn-primary { height: 48px; background: #0a0a0a; color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(10, 10, 10, 0.20), 0 4px 12px -2px rgba(10, 10, 10, 0.18); transition: background 180ms ease-out, transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); letter-spacing: -0.005em; } body.auth-theme-light .btn-primary:hover { background: #262626; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 1px 2px rgba(10, 10, 10, 0.22), 0 6px 16px -4px rgba(10, 10, 10, 0.26); } body.auth-theme-light .btn-primary:active { transform: scale(0.98); transition: transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* outline */ body.auth-theme-light .btn-outline { background: transparent; color: var(--text); border: 1px solid rgba(10, 10, 10, 0.18); } body.auth-theme-light .btn-outline:hover { background: rgba(10, 10, 10, 0.04); border-color: rgba(10, 10, 10, 0.30); } /* ───────── toggle-link (texto secundario sin border, hover subraya) ───────── El design refinado usa solo texto color medium, hover negro + underline. */ body.auth-theme-light .toggle-link { background: transparent; border: 0; color: var(--text-2); padding: 6px; font-size: 13px; text-decoration: none; } body.auth-theme-light .toggle-link:hover { color: var(--text); background: transparent; text-decoration: underline; text-underline-offset: 3px; } /* ───────── card footer (separator dashed 6% para split más sutil) ───────── */ body.auth-theme-light .card-footer { border-top: 1px dashed rgba(10, 10, 10, 0.06); color: var(--muted); letter-spacing: 0.12em; } body.auth-theme-light .card-footer .dot { background: #0a0a0a; box-shadow: 0 0 6px rgba(10, 10, 10, 0.15); } /* ───────── status circles (matching design: ring blanco con check negro) ───────── */ body.auth-theme-light .status-circle { background: #fafafa; border: 1px solid #d4d4d4; box-shadow: none; color: #0a0a0a; width: 56px; height: 56px; } body.auth-theme-light .status-circle.error { border-color: #a3a3a3; color: #0a0a0a; } body.auth-theme-light .status-title.success, body.auth-theme-light .status-title.error { color: var(--text); } body.auth-theme-light .email-chip { background: rgba(10, 10, 10, 0.04); border-color: rgba(10, 10, 10, 0.10); color: var(--text); } /* ───────── alert / error ───────── */ body.auth-theme-light .alert { background: rgba(10, 10, 10, 0.04); border-color: rgba(10, 10, 10, 0.16); color: #0a0a0a; } /* ───────── spinner ───────── */ body.auth-theme-light .spinner { border-color: rgba(10, 10, 10, 0.08); border-top-color: rgba(10, 10, 10, 0.72); } body.auth-theme-light .spinner-inline { border-color: rgba(255, 255, 255, 0.22); border-top-color: rgba(255, 255, 255, 0.92); } /* ───────── focus ring monocromático ───────── */ body.auth-theme-light :focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; } /* (internal beam + edge-glow overrides eliminados — el haz inter-páginas ya no existe en esta versión, no se requieren overrides en light mode) */