/* ================================================================ MexCloud — Sistema de diseño (núcleo de tokens y temas) ---------------------------------------------------------------- Hereda la identidad de WebDav MexMail: mismos nombres de token, misma estética base (radios, sombras, tipografía, densidad). Cuatro temas seleccionables (Fase 3): - Sistema → sin data-theme, sigue prefers-color-scheme. - Claro → [data-theme="claro"] (también el :root por defecto). - Oscuro → [data-theme="oscuro"]. - Alto contraste → [data-theme="contraste"]. Anti-parpadeo: aplicar el tema ANTES de pintar. En el , antes de este CSS: ================================================================ */ /* ---- Estética base: tokens que NO cambian entre temas ---- */ :root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 3px var(--color-shadow); --shadow-md: 0 4px 6px var(--color-shadow); --shadow-lg: 0 10px 25px var(--color-shadow); --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size: 14px; --line-height: 1.6; --sidebar-width: 240px; --navbar-height: 56px; --transition: 0.2s ease; } /* ---- Claro (por defecto) — identidad WebDav MexMail ---- */ :root, [data-theme="claro"] { --color-bg: #f5f7fa; --color-surface: #ffffff; --color-surface-2: #eef1f6; --color-border: #d8dde6; --color-text: #1a202c; --color-text-2: #4a5568; --color-text-muted: #718096; --color-primary: #2563eb; --color-primary-h: #1d4ed8; --color-primary-fg: #ffffff; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #0891b2; --color-sidebar-bg: #eef1f6; --color-sidebar-fg: #334155; --color-sidebar-act: #2563eb; --color-shadow: rgba(0, 0, 0, 0.08); --color-overlay: rgba(0, 0, 0, 0.45); } /* ---- Sistema: sin data-theme, sigue al S.O. cuando prefiere oscuro ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #263349; --color-border: #334155; --color-text: #f1f5f9; --color-text-2: #cbd5e1; --color-text-muted: #94a3b8; --color-primary: #3b82f6; --color-primary-h: #2563eb; --color-primary-fg: #ffffff; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #22d3ee; --color-sidebar-bg: #0f172a; --color-sidebar-fg: #94a3b8; --color-sidebar-act: #3b82f6; --color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7); } } /* ---- Oscuro — identidad WebDav MexMail ---- */ [data-theme="oscuro"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #263349; --color-border: #334155; --color-text: #f1f5f9; --color-text-2: #cbd5e1; --color-text-muted: #94a3b8; --color-primary: #3b82f6; --color-primary-h: #2563eb; --color-primary-fg: #ffffff; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #22d3ee; --color-sidebar-bg: #0f172a; --color-sidebar-fg: #94a3b8; --color-sidebar-act: #3b82f6; --color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7); } /* ---- Alto contraste — accesibilidad (WCAG), bordes y texto reforzados ---- */ [data-theme="contraste"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-2: #f0f0f0; --color-border: #000000; --color-text: #000000; --color-text-2: #1a1a1a; --color-text-muted: #333333; --color-primary: #0033cc; --color-primary-h: #002499; --color-primary-fg: #ffffff; --color-success: #006600; --color-warning: #8a4b00; --color-danger: #cc0000; --color-info: #005580; --color-sidebar-bg: #000000; --color-sidebar-fg: #ffffff; --color-sidebar-act: #4d7fff; --color-shadow: rgba(0, 0, 0, 0.25); --color-overlay: rgba(0, 0, 0, 0.7); }