/* ───────────────────────────────────────────────────────────── Azhum Platform · azhum-tokens.css ───────────────────────────────────────────────────────────── PURE TOKENS — solo variables CSS. No reglas, no clases. Capa: Azhum.Components (plataforma compartida). Estructura: · [data-theme="dark"] → paleta dark (default) · [data-theme="light"] → paleta light · :root → tokens compartidos (radius, spacing, fonts, type scale, etc. — no varían entre themes) El theme activo se determina por el atributo data-theme en . Cambio de theme: ver Azhum.Components/Services/ThemeService.cs. Orden de carga obligatorio en el host: 1. Telerik base theme (`_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css`) 2. azhum-tokens.css ← este archivo 3. azhum-theme.css ← clases utilitarias 4. (Opcional) custom CSS específico de producto o cliente Basado en azhum_design_system_final.html v1. ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ DARK THEME (default) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Backgrounds ──────────────────────────────────────── */ --az-bg: #0B1220; --az-bg-2: #111827; --az-bg-deep: #080A0F; --az-surface: #121A27; --az-surface-2: #1B2433; --az-surface-3: #222D3E; --az-overlay: rgba(0, 0, 0, 0.5); /* ── Bordes translúcidos + sólido fallback ────────────── */ --az-border-subtle: rgba(255, 255, 255, 0.06); --az-border: rgba(255, 255, 255, 0.10); --az-border-strong: rgba(255, 255, 255, 0.16); --az-border-solid: #2A3547; /* ── Texto (4 niveles) ────────────────────────────────── */ --az-text: #F5F7FA; --az-text-2: #CDD5E0; --az-text-muted: #8896AB; --az-text-faint: #5A6880; /* ── Acentos + variants muted (10-15% alpha) ──────────── */ --az-cyan: #22D3EE; --az-cyan-muted: rgba(34, 211, 238, 0.15); --az-blue: #4F7CFF; --az-blue-hover: #6E94FF; --az-blue-muted: rgba(79, 124, 255, 0.12); --az-violet: #8B5CF6; --az-violet-muted: rgba(139, 92, 246, 0.12); --az-green: #22C55E; --az-green-muted: rgba(34, 197, 94, 0.10); --az-amber: #F59E0B; --az-amber-muted: rgba(245, 158, 11, 0.10); --az-red: #EF4444; --az-red-muted: rgba(239, 68, 68, 0.10); /* ── Glow effects (sombras con tinte azul/cyan) ──────── */ --az-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.08); --az-glow-blue: 0 0 20px rgba(79, 124, 255, 0.08); --az-glow-blue-soft: 0 8px 24px -10px rgba(79, 124, 255, 0.5); --az-glow-blue-strong: 0 12px 32px -10px rgba(79, 124, 255, 0.6); --az-inset-hi: 0 1px 0 rgba(255, 255, 255, 0.08) inset; /* ── Shadows tipificadas ──────────────────────────────── */ --az-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15); --az-shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.4); /* ── Elevation scale (0-4) ────────────────────────────── */ --az-elev-0: none; --az-elev-1: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16); --az-elev-2: 0 3px 8px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.16); --az-elev-3: 0 8px 24px rgba(0, 0, 0, 0.36), 0 4px 8px rgba(0, 0, 0, 0.20); --az-elev-4: 0 16px 48px rgba(0, 0, 0, 0.44), 0 8px 16px rgba(0, 0, 0, 0.24); /* ── Chart series (6 colores perceptualmente diferenciados) */ --az-series-a: #22D3EE; --az-series-b: #4F7CFF; --az-series-c: #8B5CF6; --az-series-d: #F59E0B; --az-series-e: #34D399; --az-series-f: #FB7185; /* ── Power BI embed (zona oscura sin chrome) ──────────── */ --az-pbi-bg: #0B1220; --az-pbi-card: #121A27; --az-pbi-text: #F5F7FA; --az-pbi-border: #1E2A3C; /* ── Topbar / Sidebar específicos (glassmorphism) ─────── */ --az-topbar-bg: rgba(11, 18, 32, 0.75); --az-sidebar-bg: rgba(11, 18, 32, 0.60); --az-topbar-text: #F5F7FA; /* ── Kendo / Telerik overrides ────────────────────────── */ --kendo-color-primary: #4F7CFF; --kendo-color-primary-hover: #6E94FF; --kendo-color-primary-active: #3E66E0; --kendo-color-primary-emphasis: #4F7CFF; --kendo-color-on-primary: #FFFFFF; --kendo-color-success: #22C55E; --kendo-color-warning: #F59E0B; --kendo-color-error: #EF4444; --kendo-color-info: #22D3EE; --kendo-color-base: #111827; --kendo-color-base-hover: #1A2332; --kendo-color-base-active: #1A2332; --kendo-color-base-emphasis: #1A2332; --kendo-color-on-base: #F5F7FA; --kendo-color-app-surface: #0B1220; --kendo-color-on-app-surface: #F5F7FA; --kendo-color-surface: #111827; --kendo-color-surface-alt: #1A2332; --kendo-color-on-surface: #F5F7FA; --kendo-component-bg: #111827; --kendo-component-text: #F5F7FA; --kendo-component-border: rgba(255, 255, 255, 0.10); --kendo-body-bg: #0B1220; --kendo-body-text: #F5F7FA; --kendo-border: rgba(255, 255, 255, 0.10); } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Backgrounds ──────────────────────────────────────── */ --az-bg: #F7F8FB; --az-bg-2: #FFFFFF; --az-bg-deep: #EDF0F5; --az-surface: #FFFFFF; --az-surface-2: #F2F4F7; --az-surface-3: #E9ECF2; --az-overlay: rgba(0, 0, 0, 0.25); /* ── Bordes ───────────────────────────────────────────── */ --az-border-subtle: rgba(0, 0, 0, 0.07); --az-border: rgba(0, 0, 0, 0.12); --az-border-strong: rgba(0, 0, 0, 0.20); --az-border-solid: #D0D7E2; /* ── Texto (4 niveles) ────────────────────────────────── */ --az-text: #0D1B2A; --az-text-2: #1E3048; --az-text-muted: #5C6F85; --az-text-faint: #94A3B8; /* ── Acentos (más saturados para light bg) + variants ── */ --az-cyan: #06B6D4; --az-cyan-muted: rgba(6, 182, 212, 0.12); --az-blue: #2563EB; --az-blue-hover: #3B82F6; --az-blue-muted: rgba(37, 99, 235, 0.10); --az-violet: #7C3AED; --az-violet-muted: rgba(124, 58, 237, 0.10); --az-green: #16A34A; --az-green-muted: rgba(22, 163, 74, 0.10); --az-amber: #D97706; --az-amber-muted: rgba(217, 119, 6, 0.10); --az-red: #DC2626; --az-red-muted: rgba(220, 38, 38, 0.10); /* ── Glow (más suaves en light, glow-cyan desactivado) ─ */ --az-glow-cyan: none; --az-glow-blue: 0 0 0 3px rgba(37, 99, 235, 0.15); --az-glow-blue-soft: 0 8px 24px -10px rgba(37, 99, 235, 0.30); --az-glow-blue-strong: 0 12px 32px -10px rgba(37, 99, 235, 0.35); --az-inset-hi: 0 1px 0 rgba(255, 255, 255, 0.60) inset; /* ── Shadows tipificadas (más suaves) ─────────────────── */ --az-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); --az-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.08); /* ── Elevation scale (0-4) ────────────────────────────── */ --az-elev-0: none; --az-elev-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --az-elev-2: 0 3px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --az-elev-3: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); --az-elev-4: 0 16px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08); /* ── Chart series (perceptualmente matched para light) ─ */ --az-series-a: #06B6D4; --az-series-b: #2563EB; --az-series-c: #7C3AED; --az-series-d: #D97706; --az-series-e: #059669; --az-series-f: #E11D48; /* ── Power BI embed (zona blanca) ─────────────────────── */ --az-pbi-bg: #FFFFFF; --az-pbi-card: #FFFFFF; --az-pbi-text: #0D1B2A; --az-pbi-border: #E9ECF2; /* ── Topbar / Sidebar específicos ─────────────────────── */ --az-topbar-bg: rgba(255, 255, 255, 0.80); --az-sidebar-bg: rgba(247, 248, 251, 0.85); --az-topbar-text: #0D1B2A; /* ── Kendo / Telerik overrides ────────────────────────── */ --kendo-color-primary: #2563EB; --kendo-color-primary-hover: #3B82F6; --kendo-color-primary-active: #1D4ED8; --kendo-color-primary-emphasis: #2563EB; --kendo-color-on-primary: #FFFFFF; --kendo-color-success: #16A34A; --kendo-color-warning: #D97706; --kendo-color-error: #DC2626; --kendo-color-info: #06B6D4; --kendo-color-base: #FFFFFF; --kendo-color-base-hover: #F2F4F7; --kendo-color-base-active: #E9ECF2; --kendo-color-base-emphasis: #F2F4F7; --kendo-color-on-base: #0D1B2A; --kendo-color-app-surface: #F7F8FB; --kendo-color-on-app-surface: #0D1B2A; --kendo-color-surface: #FFFFFF; --kendo-color-surface-alt: #F2F4F7; --kendo-color-on-surface: #0D1B2A; --kendo-component-bg: #FFFFFF; --kendo-component-text: #0D1B2A; --kendo-component-border: #D0D7E2; --kendo-body-bg: #F7F8FB; --kendo-body-text: #0D1B2A; --kendo-border: #D0D7E2; } /* ═══════════════════════════════════════════════════════════════ SHARED TOKENS (no varían entre themes) ═══════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ───────────────────────────────────────── */ --az-font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --az-font-display: 'Manrope', 'Inter', sans-serif; --az-font-mono: 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', monospace; /* ── Type scale — Minor Third (1.2x) from 14px base ──── */ --az-text-xs: 10px; --az-text-sm: 12px; --az-text-md: 14px; --az-text-lg: 17px; --az-text-xl: 20px; --az-text-2xl: 24px; --az-text-3xl: 29px; --az-text-4xl: 35px; --az-text-5xl: 42px; /* ── Line heights ─────────────────────────────────────── */ --az-leading-tight: 1.2; --az-leading-normal: 1.5; --az-leading-relaxed: 1.7; /* ── Radius scale ─────────────────────────────────────── */ --az-radius-xs: 4px; --az-radius-sm: 6px; --az-radius-md: 10px; --az-radius-lg: 14px; --az-radius-xl: 20px; --az-radius-full: 9999px; /* ── Spacing scale ────────────────────────────────────── */ --az-space-xs: 4px; --az-space-sm: 8px; --az-space-md: 16px; --az-space-lg: 24px; --az-space-xl: 32px; --az-space-2xl: 48px; --az-space-3xl: 64px; /* ── Icon sizes ───────────────────────────────────────── */ --az-icon-xs: 14px; --az-icon-sm: 16px; --az-icon-md: 20px; --az-icon-lg: 24px; --az-icon-xl: 32px; /* ── Transiciones ─────────────────────────────────────── */ --az-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --az-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --az-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ───────────────────────────────────────────── */ --az-topbar-height: 56px; --az-sidebar-width: 250px; --az-sidebar-mini-width: 56px; --az-rail-width: 56px; /* ── Kendo shared ─────────────────────────────────────── */ --kendo-border-radius: 8px; } /* ═══════════════════════════════════════════════════════════════ FALLBACK — si no hay data-theme, aplica dark ═══════════════════════════════════════════════════════════════ */ html:not([data-theme]) { /* Repetimos las variables clave de dark para evitar FOUC */ --az-bg: #0B1220; --az-text: #F5F7FA; --az-blue: #4F7CFF; --az-border: rgba(255, 255, 255, 0.10); }