/* ============================================================================ Espacios3D Studio · Tema oscuro azul marino · STUDIO-THEME-001 Misma identidad DESIGN-001: este archivo SOLO redefine los valores de los tokens al modo oscuro azul marino de Studio. Ningún nombre de token cambia, por eso base.css y components.css (copias literales del DS de Platform) funcionan sin tocar una línea. Mecanismo: — el mismo patrón que el data-theme="dark" que ya trae tokens.css, con paleta marina propia. ============================================================================ */ [data-theme="studio"] { /* ---- Roles de superficie y texto → azul marino ---- */ --bg: #070d1f; /* marino profundo (fondo de la app) */ --surface: #0d1731; /* paneles y tarjetas */ --surface-2: #111c3c; /* superficie alterna */ --border: rgba(148, 178, 255, .13); --border-strong: rgba(148, 178, 255, .22); --text: #e8edfa; /* AA sobre marino */ --text-2: #9fadd0; /* secundario */ --text-3: #67759e; /* terciario / deshabilitado */ --accent: #4c82ff; /* azul de marca, aclarado para contraste en oscuro */ --accent-text: #8fb0ff; /* el acento cuando es texto/enlace */ --focus-ring: 0 0 0 3px rgba(76, 130, 255, .42); /* ---- Escalas remapeadas. Los componentes las usan en hovers y fondos: en oscuro, "gris más claro" pasa a ser "azul más elevado". ---- */ --gray-25: #0f1a38; --gray-50: #152147; /* hover de superficies (botones secundarios, menús) */ --gray-100: #1b2a55; /* pista de progreso, borde sutil */ --gray-200: #24356b; --gray-300: #31447f; /* interruptor apagado, divisores marcados */ --gray-400: #67759e; --gray-500: #9fadd0; --gray-600: #c6d1ec; --gray-700: #dde4f5; /* ---- Tintes de acento y semánticos, en versión nocturna ---- */ --accent-50: rgba(76, 130, 255, .12); --accent-100: rgba(76, 130, 255, .22); --accent-200: rgba(76, 130, 255, .34); --accent-600: #6d99ff; /* hover del botón primario (aclarar, no oscurecer) */ --accent-700: #3a6fe8; /* estado activo */ --success: #2ec46e; --success-tint: rgba(46, 196, 110, .14); --warning: #e4a849; --warning-tint: rgba(228, 168, 73, .14); --danger: #e05c5c; --danger-tint: rgba(224, 92, 92, .14); /* ---- Elevación sobre fondo marino (sombras más profundas) ---- */ --shadow-xs: 0 1px 2px rgba(2, 6, 18, .35); --shadow-sm: 0 1px 2px rgba(2, 6, 18, .35), 0 2px 8px rgba(2, 6, 18, .35); --shadow-md: 0 2px 6px rgba(2, 6, 18, .40), 0 12px 28px rgba(2, 6, 18, .45); --shadow-lg: 0 10px 20px rgba(2, 6, 18, .45), 0 28px 64px rgba(2, 6, 18, .55); --shadow-accent: 0 6px 20px rgba(76, 130, 255, .35); --ring-inset: inset 0 0 0 1px rgba(148, 178, 255, .07); } /* ---- Adaptaciones puntuales de componentes al marino (mínimas y locales; el resto se resuelve solo vía tokens). ---- */ [data-theme="studio"] body { background: var(--bg); background-image: radial-gradient(1100px 520px at 85% -10%, rgba(76, 130, 255, .14), transparent 60%), radial-gradient(900px 480px at -10% 8%, rgba(43, 108, 255, .10), transparent 55%); background-attachment: fixed; } [data-theme="studio"] ::selection { background: rgba(76, 130, 255, .45); color: #fff; } [data-theme="studio"] .appbar { background: rgba(7, 13, 31, .72); } [data-theme="studio"] .brand .mark { box-shadow: 0 2px 10px rgba(76, 130, 255, .45); } [data-theme="studio"] .toast { background: #132048; border: 1px solid var(--border-strong); color: var(--text); } [data-theme="studio"] .toast--success { background: #16693e; border-color: transparent; color: #fff; } [data-theme="studio"] .toast--error { background: #9e3d3d; border-color: transparent; color: #fff; } [data-theme="studio"] .form-error { border-color: rgba(224, 92, 92, .35); } [data-theme="studio"] .form-note { border-color: rgba(76, 130, 255, .30); } [data-theme="studio"] .modal-back { background: rgba(2, 6, 18, .62); } [data-theme="studio"] code { color: var(--gray-700); } /* Barras de desplazamiento acordes al tema */ [data-theme="studio"] * { scrollbar-width: thin; scrollbar-color: #31447f transparent; } [data-theme="studio"] *::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="studio"] *::-webkit-scrollbar-thumb { background: #31447f; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } [data-theme="studio"] *::-webkit-scrollbar-track { background: transparent; }