/* ================================================================ 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: ================================================================ */ /* ---- Tipografía auto-hospedada (regla del proyecto: nada de CDN) ---- Fraunces solo la usa el tema «Vainilla». El navegador NO la descarga si ninguna regla activa la referencia, así que los demás temas no pagan estos 72 KB. */ /* Fraunces es una tipografía VARIABLE: un solo archivo cubre todo el rango de pesos, y se declara con `font-weight: 100 900` en vez de un @font-face por peso. Don Centavo la sirve tres veces (Regular/SemiBold/Black son el MISMO archivo, md5 idéntico) y lo mismo con Inter: son ~250 KB descargados de más. Aquí va una sola vez, 36 KB. */ @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/Fraunces-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---- Estética base: tokens que los temas PUEDEN redefinir ---- Antes decía «que NO cambian entre temas». Se abrieron a propósito: un tema es una identidad completa (tipografía y forma), no solo una paleta. Como `:root` y `[data-theme=…]` tienen la MISMA especificidad, basta con que el bloque del tema vaya después en este archivo para que gane. */ :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; /* Tipografía de títulos. Por defecto la misma del cuerpo: así los temas actuales no cambian ni un pixel, y un tema con letra de display solo tiene que redefinirla. */ --font-title: var(--font-sans); --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size: 14px; --line-height: 1.6; --sidebar-width: 240px; --navbar-height: 56px; --transition: 0.2s ease; } /* ---- Scrollbars y controles nativos combinados con el tema ---- */ /* color-scheme hace que el navegador pinte controles nativos (y scrollbars por defecto) en claro u oscuro según el tema, evitando las barras blancas en oscuro. */ :root, [data-theme="claro"], [data-theme="contraste"], [data-theme="vainilla"] { color-scheme: light; } [data-theme="oscuro"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } /* WebKit/Blink: pulgar sutil (con «padding» por el borde transparente), pista invisible. */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: padding-box; } /* ---- 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); } /* ---- Vainilla — identidad de Don Centavo ------------------------------------ Un tema es más que una paleta: aquí cambian también la TIPOGRAFÍA de títulos (Fraunces, con serifa) y los RADIOS, que en Don Centavo son notablemente más redondeados. Por eso se abrieron esos tokens a los temas. Los neutros son CÁLIDOS (tiran a crema, no a gris) y las sombras van en marrón —rgba(61,40,23)— en vez de negro: una sombra negra sobre fondo crema se ve sucia. Los colores se toman tal cual del sistema de diseño de Don Centavo (doncentavo/public/css/variables.css); solo se traducen los nombres de token. ---------------------------------------------------------------------------- */ [data-theme="vainilla"] { /* Terracota. NO es el #d97742 exacto de Don Centavo: aquel es para una app móvil con texto de 18 px, donde basta 3:1; MexCloud usa 14 px y exige 4.5:1, y el original da 3.15:1 con letra blanca encima —botones ilegibles—. Se baja la luminosidad lo justo conservando tono y saturación, así que el color sigue siendo el mismo terracota. */ --color-primary: #bc5b26; --color-primary-h: #9d4c20; --color-primary-fg: #ffffff; /* El terracota original se conserva para adornos SIN texto encima (el propio Don Centavo lo usa como color de marca). */ --color-acento: #d97742; /* Neutros cálidos */ --color-bg: #faf6f0; --color-surface: #ffffff; --color-surface-2: #f5ebdd; --color-border: #e8ddd0; /* Texto: marrones, no grises */ --color-text: #3d2817; --color-text-2: #6b5544; --color-text-muted: #7e6f5f; /* el #9b8b7a original daba 3.06:1 sobre el crema */ /* Estados de Don Centavo, oscurecidos igual y por lo mismo: se usan de fondo con texto blanco (insignias, botones), y los tonos originales daban 2.4–2.5:1. */ --color-success: #578144; --color-warning: #9c6e16; --color-danger: #c84b4b; /* este ya cumplía (4.60:1) */ --color-info: #477ba6; --color-sidebar-bg: #f5ebdd; --color-sidebar-fg: #6b5544; --color-sidebar-act: #bc5b26; /* Sombras marrones, no negras */ --color-shadow: rgba(61, 40, 23, 0.12); --color-overlay: rgba(61, 40, 23, 0.45); /* Tipografía y forma: lo que de verdad distingue a Don Centavo */ --font-title: 'Fraunces', Georgia, 'Times New Roman', serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; }