/* * ╔═══════════════════════════════════════════════════════════╗ * ║ GALAPPXY — Design Tokens ║ * ║ v2.0 · Febrero 2026 ║ * ║ ║ * ║ Estos tokens son el "contrato" de diseño. ║ * ║ BRAND.theme_config_json sobrescribe estas variables ║ * ║ por tenant vía [data-tenant="ID"] o inline. ║ * ╚═══════════════════════════════════════════════════════════╝ */ :root { /* ─── BRAND COLORS ─────────────────────────────────── */ --gx-primary: #7B2CBF; --gx-primary-hover: #5a189a; --gx-primary-light: #e0aaff; --gx-primary-dark: #3c096c; --gx-primary-rgb: 123, 44, 191; /* Para usar con rgba() */ --gx-secondary: #FF6D9F; --gx-secondary-hover: #e04577; --gx-secondary-light: #ffd6e5; --gx-secondary-rgb: 255, 109, 159; --gx-accent: #00D4AA; --gx-accent-hover: #00b894; --gx-accent-light: #b8f5e6; /* ─── SEMANTIC COLORS ──────────────────────────────── */ --gx-success: #10B981; --gx-success-light: #D1FAE5; --gx-danger: #EF4444; --gx-danger-light: #FEE2E2; --gx-warning: #F59E0B; --gx-warning-light: #FEF3C7; --gx-info: #3B82F6; --gx-info-light: #DBEAFE; /* ─── SURFACE & BACKGROUND ─────────────────────────── */ --gx-bg-body: #F5F3FF; --gx-bg-surface: #FFFFFF; --gx-bg-surface-hover: #F9F7FF; --gx-bg-surface-alt: #F0ECFF; --gx-bg-elevated: #FFFFFF; --gx-bg-overlay: rgba(0, 0, 0, 0.45); --gx-bg-scrim: rgba(0, 0, 0, 0.15); /* ─── SIDEBAR ──────────────────────────────────────── */ --gx-sidebar-bg: #1A0038; --gx-sidebar-bg-hover: rgba(255, 255, 255, 0.08); --gx-sidebar-bg-active: rgba(255, 255, 255, 0.14); --gx-sidebar-text: rgba(255, 255, 255, 0.65); --gx-sidebar-text-active: #FFFFFF; --gx-sidebar-icon: rgba(255, 255, 255, 0.5); --gx-sidebar-icon-active: #FFFFFF; --gx-sidebar-accent: var(--gx-secondary); --gx-sidebar-divider: rgba(255, 255, 255, 0.08); /* ─── CHILD SIDEBAR ────────────────────────────────── */ --gx-childsidebar-bg: #2D0060; --gx-childsidebar-text: rgba(255, 255, 255, 0.75); --gx-childsidebar-hover: rgba(255, 255, 255, 0.06); /* ─── TOPBAR ───────────────────────────────────────── */ --gx-topbar-bg: #FFFFFF; --gx-topbar-text: #374151; --gx-topbar-border: #E5E7EB; --gx-topbar-icon: #6B7280; --gx-topbar-icon-hover: var(--gx-primary); /* ─── RIGHT PANEL ──────────────────────────────────── */ --gx-panel-bg: #FFFFFF; --gx-panel-header-bg: var(--gx-primary); --gx-panel-header-text: #FFFFFF; --gx-panel-trigger-bg: var(--gx-primary-dark); --gx-panel-trigger-icon: rgba(255, 255, 255, 0.7); /* ─── TEXT ─────────────────────────────────────────── */ --gx-text-primary: #111827; --gx-text-secondary: #6B7280; --gx-text-muted: #9CA3AF; --gx-text-disabled: #D1D5DB; --gx-text-inverse: #FFFFFF; --gx-text-link: var(--gx-primary); --gx-text-link-hover: var(--gx-primary-hover); /* ─── BORDERS ──────────────────────────────────────── */ --gx-border-color: #E5E7EB; --gx-border-light: #F3F4F6; --gx-border-strong: #D1D5DB; --gx-border-focus: var(--gx-primary); --gx-radius-xs: 0.25rem; /* 4px */ --gx-radius-sm: 0.375rem; /* 6px */ --gx-radius-md: 0.5rem; /* 8px */ --gx-radius-lg: 0.75rem; /* 12px */ --gx-radius-xl: 1rem; /* 16px */ --gx-radius-2xl: 1.5rem; /* 24px */ --gx-radius-full: 9999px; /* ─── SHADOWS ──────────────────────────────────────── */ --gx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --gx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --gx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --gx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --gx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --gx-shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.18); --gx-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04); --gx-shadow-glow: 0 0 20px rgba(var(--gx-primary-rgb), 0.25); --gx-shadow-colored: 0 4px 14px rgba(var(--gx-primary-rgb), 0.3); /* ─── SPACING SCALE ────────────────────────────────── */ --gx-sp-0: 0; --gx-sp-1: 0.25rem; /* 4px */ --gx-sp-2: 0.5rem; /* 8px */ --gx-sp-3: 0.75rem; /* 12px */ --gx-sp-4: 1rem; /* 16px */ --gx-sp-5: 1.25rem; /* 20px */ --gx-sp-6: 1.5rem; /* 24px */ --gx-sp-8: 2rem; /* 32px */ --gx-sp-10: 2.5rem; /* 40px */ --gx-sp-12: 3rem; /* 48px */ --gx-sp-16: 4rem; /* 64px */ --gx-sp-20: 5rem; /* 80px */ /* ─── TYPOGRAPHY ───────────────────────────────────── */ --gx-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gx-font-display: 'DM Sans', var(--gx-font-sans); --gx-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --gx-text-xs: 0.75rem; /* 12px */ --gx-text-sm: 0.8125rem; /* 13px */ --gx-text-base: 0.875rem; /* 14px — base más compacto para dashboards */ --gx-text-md: 1rem; /* 16px */ --gx-text-lg: 1.125rem; /* 18px */ --gx-text-xl: 1.25rem; /* 20px */ --gx-text-2xl: 1.5rem; /* 24px */ --gx-text-3xl: 1.875rem; /* 30px */ --gx-text-4xl: 2.25rem; /* 36px */ --gx-weight-normal: 400; --gx-weight-medium: 500; --gx-weight-semibold: 600; --gx-weight-bold: 700; --gx-leading-tight: 1.25; --gx-leading-snug: 1.375; --gx-leading-normal: 1.5; --gx-leading-relaxed: 1.625; --gx-tracking-tight: -0.015em; --gx-tracking-normal: 0; --gx-tracking-wide: 0.025em; /* ─── LAYOUT DIMENSIONS ────────────────────────────── */ --gx-sidebar-width: 72px; --gx-childsidebar-width: 260px; --gx-topbar-height: 60px; --gx-right-trigger-width: 40px; --gx-right-panel-width: 360px; --gx-content-max-width: 1400px; /* ─── Z-INDEX SCALE ────────────────────────────────── */ --gx-z-base: 0; --gx-z-raised: 1; --gx-z-dropdown: 100; --gx-z-sticky: 200; --gx-z-sidebar: 300; --gx-z-panel: 400; --gx-z-overlay: 500; --gx-z-modal: 600; --gx-z-popover: 700; --gx-z-toast: 800; --gx-z-tooltip: 900; --gx-z-loader: 1000; /* ─── ANIMATION & MOTION ───────────────────────────── */ --gx-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --gx-ease-in: cubic-bezier(0.4, 0, 1, 1); --gx-ease-out: cubic-bezier(0, 0, 0.2, 1); --gx-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --gx-duration-fast: 120ms; --gx-duration-base: 200ms; --gx-duration-medium: 300ms; --gx-duration-slow: 400ms; --gx-duration-slower: 600ms; /* ─── COMPONENT-SPECIFIC TOKENS ────────────────────── */ --gx-btn-radius: var(--gx-radius-md); --gx-card-radius: var(--gx-radius-lg); --gx-input-radius: var(--gx-radius-md); --gx-input-height: 40px; --gx-input-height-sm: 32px; --gx-input-height-lg: 48px; --gx-badge-size: 8px; --gx-avatar-size: 36px; --gx-avatar-size-sm: 28px; --gx-avatar-size-lg: 48px; --gx-avatar-size-xl: 64px; --gx-dropdown-min-w: 220px; --gx-dropdown-max-h: 360px; } /* ══════════════════════════════════════════════════════════ DARK MODE Activado con data-theme="dark" en ══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --gx-bg-body: #0F0A1A; --gx-bg-surface: #1A1228; --gx-bg-surface-hover: #241B35; --gx-bg-surface-alt: #1E1530; --gx-bg-elevated: #241B35; --gx-bg-overlay: rgba(0, 0, 0, 0.7); --gx-sidebar-bg: #0D0718; --gx-childsidebar-bg: #150E24; --gx-topbar-bg: #1A1228; --gx-topbar-text: #E5E7EB; --gx-topbar-border: #2D2240; --gx-topbar-icon: #9CA3AF; --gx-panel-bg: #1A1228; --gx-text-primary: #F3F4F6; --gx-text-secondary: #9CA3AF; --gx-text-muted: #6B7280; --gx-text-disabled: #4B5563; --gx-border-color: #2D2240; --gx-border-light: #241B35; --gx-border-strong: #3D3255; --gx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --gx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --gx-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --gx-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35); --gx-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4); --gx-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15); --gx-success-light: rgba(16, 185, 129, 0.15); --gx-danger-light: rgba(239, 68, 68, 0.15); --gx-warning-light: rgba(245, 158, 11, 0.15); --gx-info-light: rgba(59, 130, 246, 0.15); }