/* ========================================================================= Design tokens — Asistente de Taller (GWAMI) Única fuente de verdad del sistema de diseño: color, tipografía, espaciado, radios, sombras y motion. Paleta de marca GWM preservada (negro/blanco + acento azul + funcionales). Debe cargarse ANTES que el resto de hojas. El tema activo lo fija el atributo data-theme en (ver js/theme.js y el script anti-FOUC en el de cada página). ========================================================================= */ :root { color-scheme: light dark; /* ---- Constantes de marca (no cambian por tema) ---- */ --gwm-black: #000000; --gwm-white: #ffffff; /* ---- Acento y funcionales (mismo tono en ambos temas) ---- */ --accent: #1d4ed8; --accent-hover: #2563eb; --on-accent: #ffffff; --warning: #ff9500; --danger: #ff3b30; --danger-hover: #c62f27; /* ---- Tipografía ---- */ --font-display: "Sora", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", monospace; --tracking-tight: -0.02em; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7; --reading-width: 68ch; /* ---- Espaciado ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* ---- Radios ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 9999px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-med: 260ms; --dur-slow: 420ms; } /* ---- Tema claro (por defecto) ---- */ :root, :root[data-theme="light"] { --color-bg: #ffffff; --color-bg-subtle: #f5f6f8; --color-surface: #ffffff; --color-surface-2: #f3f4f6; --color-text: #111318; --color-text-muted: #5b616e; --color-text-subtle: #8b909a; --color-border: #e3e5ea; --color-border-strong: #c9cdd4; --color-chrome: #000000; /* barra/chrome negra de marca */ --color-on-chrome: #ffffff; --color-ring: color-mix(in srgb, var(--accent) 42%, transparent); --shadow-sm: 0 1px 2px rgba(16, 19, 24, 0.06); --shadow-md: 0 6px 20px rgba(16, 19, 24, 0.1); --shadow-lg: 0 18px 48px rgba(16, 19, 24, 0.16); } /* ---- Tema oscuro ---- */ :root[data-theme="dark"] { --color-bg: #0e0f12; --color-bg-subtle: #141519; --color-surface: #17181c; --color-surface-2: #242424; /* superficie oscura ya presente en la app */ --color-text: #f1f2f4; --color-text-muted: #a6abb4; --color-text-subtle: #767c86; --color-border: #2a2c31; --color-border-strong: #3b3e45; --color-chrome: #0b0c0e; /* chrome casi-negra en oscuro */ --color-on-chrome: #ffffff; --color-ring: color-mix(in srgb, var(--accent) 60%, transparent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } /* ========================================================================= Capa base ========================================================================= */ body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(h1, h2, h3, .u-display) { font-family: var(--font-display); letter-spacing: var(--tracking-tight); } /* Foco visible y accesible en toda la app */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); } /* Respeta la preferencia de movimiento reducido en todas las animaciones */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================= Componente compartido: conmutador de tema (vive sobre el chrome oscuro). Se define aquí porque lo usan todas las páginas (index, login, pin). ========================================================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: var(--color-on-chrome); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }