/* ACAGES UI — design tokens Loaded after AdminLTE/Bootstrap 3 core, before acages-components.css. Everything downstream reads these custom properties — change the palette/scale here and it propagates everywhere. */ :root, body.light-mode { color-scheme: light; /* ---- brand palette ---- */ --ac-primary-50: #eff6ff; --ac-primary-100: #dbeafe; --ac-primary-200: #bfdbfe; --ac-primary-300: #93c5fd; --ac-primary-400: #60a5fa; --ac-primary-500: #3b82f6; --ac-primary-600: #2563eb; --ac-primary-700: #1d4ed8; --ac-primary-800: #1e40af; --ac-primary: var(--ac-primary-600); --ac-primary-rgb: 37, 99, 235; --ac-accent-500: #6366f1; --ac-accent-600: #4f46e5; --ac-accent-rgb: 79, 70, 229; --ac-slate-50: #f8fafc; --ac-slate-100: #f1f5f9; --ac-slate-200: #e2e8f0; --ac-slate-300: #cbd5e1; --ac-slate-400: #94a3b8; --ac-slate-500: #64748b; --ac-slate-600: #475569; --ac-slate-700: #334155; --ac-slate-800: #1e293b; --ac-slate-900: #0f172a; --ac-slate-950: #070b14; --ac-success: #16a34a; --ac-success-rgb: 22, 163, 74; --ac-success-bg: #ecfdf3; --ac-warning: #d97706; --ac-warning-rgb: 217, 119, 6; --ac-warning-bg: #fffbeb; --ac-danger: #dc2626; --ac-danger-rgb: 220, 38, 38; --ac-danger-bg: #fef2f2; --ac-info: #0284c7; --ac-info-rgb: 2, 132, 199; --ac-info-bg: #f0f9ff; /* ---- surfaces ---- */ --ac-bg: #f4f6fb; --ac-surface: #ffffff; --ac-surface-rgb: 255, 255, 255; --ac-surface-2: var(--ac-slate-50); --ac-border: rgba(15, 23, 42, 0.08); --ac-border-strong: rgba(15, 23, 42, 0.14); /* glass */ --ac-glass-bg: rgba(255, 255, 255, 0.66); --ac-glass-border: rgba(255, 255, 255, 0.55); --ac-glass-blur: 16px; /* text */ --ac-text: var(--ac-slate-800); --ac-text-muted: var(--ac-slate-500); --ac-text-faint: var(--ac-slate-400); --ac-text-on-primary: #ffffff; /* typography */ --ac-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ac-font-display: 'Plus Jakarta Sans', var(--ac-font-sans); /* radii */ --ac-radius-sm: 8px; --ac-radius-md: 12px; --ac-radius-lg: 16px; --ac-radius-xl: 22px; --ac-radius-full: 999px; /* shadows */ --ac-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ac-shadow-md: 0 4px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06); --ac-shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.18); --ac-shadow-glow: 0 0 0 1px rgba(var(--ac-primary-rgb), 0.08), 0 8px 24px -8px rgba(var(--ac-primary-rgb), 0.35); /* spacing scale */ --ac-space-1: 4px; --ac-space-2: 8px; --ac-space-3: 12px; --ac-space-4: 16px; --ac-space-5: 20px; --ac-space-6: 24px; --ac-space-8: 32px; --ac-space-10: 40px; --ac-space-12: 48px; /* motion */ --ac-ease: cubic-bezier(0.4, 0, 0.2, 1); --ac-duration-fast: 140ms; --ac-duration: 220ms; --ac-duration-slow: 380ms; /* hero gradient */ --ac-hero-gradient: radial-gradient(120% 140% at 100% 0%, rgba(99, 102, 241, 0.85) 0%, rgba(37, 99, 235, 0.92) 42%, rgba(15, 23, 42, 0.98) 100%); } /* Sidebar (always dark, per spec, in both themes) -- deliberately its own :root-only rule, NOT folded into the ":root, body.light-mode" block above. body.light-mode/body.dark both get applied to at runtime (header.php), and a rule matching body.* declares custom properties DIRECTLY on -- which blocks inheritance from for every element inside it (the entire app), permanently, regardless of what says. That's exactly what silently broke sidebar color customization: Schsettings::savesidebarappearance()'s saved colors (ac_sidebar_theme_css(), which correctly targets :root only) could never actually reach the real .main-sidebar, and the Theme Studio's live-preview JS (setting/backendtheme.php, writes to document.documentElement.style) could never reach .ac-tsprev either -- in both cases 's own direct declaration from this block was the one actually winning the whole time. :root alone already covers both light and dark app-mode via inheritance; nothing here needs body.*. */ :root { /* Baseline promoted from the live Theme Studio configuration on 2026-08-25 (sch_settings.sidebar_* on `acages`) -- this IS the ACAGES default now, not an override sitting on top of an older one. bg-2 kept as the same derived 14%-darker shade of bg that ac_sidebar_theme_css()/applyTheme() compute for a custom bg, so the baseline and any future custom color use identical math. */ --ac-sidebar-bg: #0b1220; --ac-sidebar-bg-2: #090f1c; --ac-sidebar-text: #cbd5e1; --ac-sidebar-text-muted: #ffffff; --ac-sidebar-active-bg: #26406b; --ac-sidebar-active-text: #ffffff; --ac-sidebar-border: #0045eb; --ac-sidebar-heading: #68a8f1; --ac-sidebar-hover-bg: #1c2740; --ac-sidebar-hover-text: #ffffff; /* active-icon flattened to match active-text (both were white in the promoted config); hover-icon stays brand-tinted since hover-text was never customized away from its own default */ --ac-sidebar-active-icon: #ffffff; --ac-sidebar-hover-icon: var(--ac-primary-400); --ac-sidebar-width: 238px; } /* ---- dark mode ---- */ body.dark { color-scheme: dark; --ac-bg: #0b1220; --ac-surface: #121a2b; --ac-surface-rgb: 18, 26, 43; --ac-surface-2: #172034; --ac-border: rgba(255, 255, 255, 0.08); --ac-border-strong: rgba(255, 255, 255, 0.14); --ac-glass-bg: rgba(23, 32, 52, 0.62); --ac-glass-border: rgba(255, 255, 255, 0.08); --ac-text: #e2e8f0; --ac-text-muted: #94a3b8; --ac-text-faint: #64748b; /* --ac-sidebar-bg/-bg-2/-border deliberately NOT redeclared here. They used to get slightly darker dark-app-mode-only shades, but a direct declaration on body.dark blocks inheritance from for these same properties -- which broke the Theme Studio's live preview (setting/backendtheme.php sets these on document.documentElement) and would have silently overridden a saved custom sidebar color whenever the app itself is in dark mode. The sidebar already uses one fixed dark palette "in both themes" (see the :root block above) -- that was always the real intent; this was cosmetic-only shade polish not worth the correctness cost. */ --ac-success-bg: rgba(22, 163, 74, 0.14); --ac-warning-bg: rgba(217, 119, 6, 0.14); --ac-danger-bg: rgba(220, 38, 38, 0.14); --ac-info-bg: rgba(2, 132, 199, 0.14); --ac-shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.45), 0 2px 8px -2px rgba(0, 0, 0, 0.3); --ac-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: reduce) { :root { --ac-duration-fast: 0ms; --ac-duration: 0ms; --ac-duration-slow: 0ms; } }