/* ========================================================================== LendSwift — Design Tokens -------------------------------------------------------------------------- Single source of truth for colour, spacing, radius, shadow, type and depth. This file must be loaded FIRST, before every other stylesheet. The other stylesheets each carry their own legacy :root block; because they load afterwards they would normally win, so the light-theme values below are duplicated into an explicit [data-theme="light"] block that has higher specificity than a bare :root. Nothing in the legacy files needs editing, and no existing page can break. Dark mode: driven by the data-theme attribute on , which is set by includes/components/theme-toggle.php before first paint. When the user has expressed no preference, the OS preference is followed. ========================================================================== */ :root { /* ---- Brand ---------------------------------------------------------- */ --ls-brand-50: #eef2ff; --ls-brand-100: #e0e7ff; --ls-brand-200: #c7d2fe; --ls-brand-300: #a5b4fc; --ls-brand-400: #818cf8; --ls-brand-500: #6366f1; --ls-brand-600: #4f46e5; /* primary */ --ls-brand-700: #4338ca; --ls-brand-800: #3730a3; --ls-brand-900: #312e81; /* ---- Semantic accents ----------------------------------------------- */ --ls-success: #10b981; --ls-warning: #f59e0b; --ls-danger: #ef4444; --ls-info: #3b82f6; --ls-purple: #8b5cf6; --ls-pink: #ec4899; --ls-teal: #14b8a6; --ls-sky: #0ea5e9; /* ---- Spacing scale (4px base) --------------------------------------- */ --ls-space-1: 0.25rem; --ls-space-2: 0.5rem; --ls-space-3: 0.75rem; --ls-space-4: 1rem; --ls-space-5: 1.25rem; --ls-space-6: 1.5rem; --ls-space-8: 2rem; --ls-space-10: 2.5rem; --ls-space-12: 3rem; --ls-space-16: 4rem; /* ---- Radius --------------------------------------------------------- */ --ls-radius-sm: 0.375rem; --ls-radius-md: 0.5rem; --ls-radius-lg: 0.75rem; --ls-radius-xl: 1rem; --ls-radius-2xl: 1.5rem; --ls-radius-full: 9999px; /* ---- Type ----------------------------------------------------------- */ --ls-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ls-text-xs: 0.75rem; --ls-text-sm: 0.875rem; --ls-text-base: 1rem; --ls-text-lg: 1.125rem; --ls-text-xl: 1.25rem; --ls-text-2xl: 1.5rem; --ls-text-3xl: 1.875rem; --ls-text-4xl: 2.25rem; /* ---- Depth ---------------------------------------------------------- */ --ls-z-base: 1; --ls-z-dropdown: 1000; --ls-z-sticky: 1020; --ls-z-sidebar: 1030; --ls-z-overlay: 1040; --ls-z-modal: 1050; --ls-z-widget: 2147483000; /* the help widget sits above everything */ --ls-z-toast: 2147483100; /* ---- Motion --------------------------------------------------------- */ --ls-ease: cubic-bezier(0.4, 0, 0.2, 1); --ls-duration-fast: 120ms; --ls-duration: 200ms; --ls-duration-slow: 320ms; color-scheme: light; } /* ========================================================================== LIGHT THEME (default) Applied to both :root and [data-theme="light"] so it out-specifies the legacy :root blocks in dashboard.css / admin.css / styles.css etc. ========================================================================== */ :root, :root[data-theme="light"] { --ls-bg: #f5f6fa; --ls-bg-subtle: #eef0f6; --ls-surface: #ffffff; --ls-surface-2: #fafbfd; --ls-surface-3: #f3f4f6; --ls-surface-hover: #f9fafb; --ls-border: #e5e7eb; --ls-border-strong: #d1d5db; --ls-text: #111827; --ls-text-secondary:#374151; --ls-text-muted: #6b7280; --ls-text-inverse: #ffffff; --ls-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --ls-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06); --ls-shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.10), 0 2px 4px -1px rgba(16, 24, 40, 0.06); --ls-shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.05); --ls-shadow-xl: 0 20px 25px -5px rgba(16, 24, 40, 0.10), 0 10px 10px -5px rgba(16, 24, 40, 0.04); --ls-success-bg: #d1fae5; --ls-success-fg: #065f46; --ls-warning-bg: #fef3c7; --ls-warning-fg: #92400e; --ls-danger-bg: #fee2e2; --ls-danger-fg: #991b1b; --ls-info-bg: #dbeafe; --ls-info-fg: #1e40af; --ls-brand-bg: #e0e7ff; --ls-brand-fg: #3730a3; --ls-sidebar-bg: #ffffff; --ls-sidebar-text: #4b5563; --ls-sidebar-active: var(--ls-brand-600); --ls-overlay: rgba(17, 24, 39, 0.45); /* Bridge: legacy variable names used across the existing stylesheets. */ --primary-color: var(--ls-brand-600); --primary-hover: var(--ls-brand-700); --primary-light: var(--ls-brand-100); --text-color: var(--ls-text); --text-muted: var(--ls-text-muted); --border-color: var(--ls-border); --background-color: var(--ls-bg); --card-background: var(--ls-surface); --success-color: var(--ls-success); --error-color: var(--ls-danger); --warning-color: var(--ls-warning); --info-color: var(--ls-info); --font-family: var(--ls-font-sans); color-scheme: light; } /* ========================================================================== DARK THEME Only token values change — no component stylesheet is touched. ========================================================================== */ :root[data-theme="dark"] { --ls-bg: #0f1117; --ls-bg-subtle: #12141c; --ls-surface: #181b24; --ls-surface-2: #1e222d; --ls-surface-3: #242936; --ls-surface-hover: #222633; --ls-border: #2c3240; --ls-border-strong: #3a4152; --ls-text: #f1f3f9; --ls-text-secondary:#cbd2e0; --ls-text-muted: #8b93a7; --ls-text-inverse: #0f1117; /* Brand lifts a step in dark so it stays legible on dark surfaces. */ --ls-brand-600: #818cf8; --ls-brand-700: #6366f1; --ls-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --ls-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --ls-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --ls-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --ls-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4); --ls-success-bg: #06301f; --ls-success-fg: #6ee7b7; --ls-warning-bg: #3a2a06; --ls-warning-fg: #fcd34d; --ls-danger-bg: #3b1114; --ls-danger-fg: #fca5a5; --ls-info-bg: #10243f; --ls-info-fg: #93c5fd; --ls-brand-bg: #1e1f45; --ls-brand-fg: #c7d2fe; --ls-sidebar-bg: #141720; --ls-sidebar-text: #a8b0c2; --ls-sidebar-active: #818cf8; --ls-overlay: rgba(0, 0, 0, 0.65); /* Bridge — same names, dark values. */ --primary-color: #818cf8; --primary-hover: #a5b4fc; --primary-light: #1e1f45; --text-color: var(--ls-text); --text-muted: var(--ls-text-muted); --border-color: var(--ls-border); --background-color: var(--ls-bg); --card-background: var(--ls-surface); --success-color: #34d399; --error-color: #f87171; --warning-color: #fbbf24; --info-color: #60a5fa; color-scheme: dark; } /* ========================================================================== DARK-MODE SURFACE REMAP (must stay ABOVE the component bridge below, which refines specific cases at equal specificity and therefore needs to win on source order) The legacy stylesheets hardcode `background: #fff` on dozens of card and section classes, spread across ~460 lines of inline