/*! * ujeff-themes.css — Enterprise Premium Grade * 31 admin palettes for ujeff_delivery * Selector: [data-uj-theme=""] (set on ) * * Light themes : crimson, indigo, emerald, rose, amber, pearl, frost, linen, * snow, ivory, porcelain, mist, platinum, sunset, jade, * champagne, arctic, sapphire, copper, forest * Dark themes : midnight, slate, obsidian, royal, nebula, * onyx, carbon, abyss, cosmos, vault * Special : kenaith * * Required vars (per theme): * --uj-bg, --uj-surface, --uj-surface-2, --uj-surface-3, * --uj-border, --uj-border-strong, * --uj-text, --uj-text-2, --uj-text-3, --uj-text-muted, --uj-text-inverse, * --uj-accent, --uj-accent-2, --uj-accent-soft, --uj-accent-text, * --uj-success, --uj-warning, --uj-danger, --uj-info, * --uj-link, --uj-link-hover, * --uj-shadow-sm, --uj-shadow-md, --uj-shadow-lg, --uj-ring, * --uj-gradient-1, --uj-gradient-2, --uj-text-gradient * * Premium vars (per theme): * --uj-glow, --uj-accent-glow, --uj-surface-glass, * --uj-chrome, --uj-chrome-text, --uj-gradient-3 */ /* ============================================================ */ /* SEMANTIC DEFAULTS (success / danger / warning / info) */ /* ============================================================ */ :root { --uj-success: #16a34a; --uj-success-soft: #dcfce7; --uj-success-text: #ffffff; --uj-danger: #dc2626; --uj-danger-soft: #fee2e2; --uj-danger-text: #ffffff; --uj-warning: #d97706; --uj-warning-soft: #fef3c7; --uj-warning-text: #1a1300; --uj-info: #0891b2; --uj-info-soft: #cffafe; --uj-info-text: #ffffff; } body.ujeff-admin:not([data-uj-theme]) { --uj-success: #16a34a; --uj-success-soft: #dcfce7; --uj-success-text: #ffffff; --uj-danger: #dc2626; --uj-danger-soft: #fee2e2; --uj-danger-text: #ffffff; --uj-warning: #d97706; --uj-warning-soft: #fef3c7; --uj-warning-text: #1a1300; --uj-info: #0891b2; --uj-info-soft: #cffafe; --uj-info-text: #ffffff; } /* ---------- Default fallback (unknown / unset theme -> crimson) ---------- */ :root { --uj-bg: #fbf7f7; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f5ecec; --uj-border: #ecdada; --uj-border-strong: #d9b9b9; --uj-text: #2a0d12; --uj-text-2: #5b3036; --uj-text-3: #8a5560; --uj-text-muted: #b08891; --uj-text-inverse: #fff5f5; --uj-accent: #c1272d; --uj-accent-2: #7a0f1a; --uj-accent-soft: #fbe6e7; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #c97a16; --uj-danger: #a61b22; --uj-info: #1f6feb; --uj-link: #a61b22; --uj-link-hover: #7a0f1a; --uj-shadow-sm: 0 1px 2px rgba(122,15,26,0.08); --uj-shadow-md: 0 6px 18px rgba(122,15,26,0.10); --uj-shadow-lg: 0 18px 40px rgba(122,15,26,0.16); --uj-ring: rgba(193,39,45,0.35); --uj-gradient-1: linear-gradient(135deg,#c1272d 0%,#7a0f1a 100%); --uj-gradient-2: radial-gradient(circle at 20% 20%,rgba(193,39,45,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#7a0f1a 0%,#c1272d 50%,#e8636a 100%); --uj-glow: 0 0 20px rgba(193,39,45,0.15); --uj-accent-glow: 0 0 30px rgba(193,39,45,0.25); --uj-surface-glass: rgba(255,255,255,0.72); --uj-chrome: linear-gradient(180deg,#f8f8f8 0%,#e8e8e8 100%); --uj-chrome-text: #555; --uj-gradient-3: linear-gradient(135deg,rgba(193,39,45,0.08) 0%,rgba(122,15,26,0.04) 100%); --uj-accent-hover: #7a0f1a; --uj-surface-alt: #ffffff; --uj-border-color: #ecdada; --uj-text-primary: #2a0d12; --uj-text-secondary: #5b3036; /* Form control tokens — distinct from surface so inputs are visible on cards */ --uj-input-bg: #f8f9fa; --uj-input-border-color: #ced4da; --uj-input-focus-border: var(--uj-accent); --uj-input-focus-ring: 0 0 0 3px rgba(var(--uj-accent-rgb, 193,39,45), 0.2); --uj-input-placeholder: var(--uj-text-3); } body.ujeff-admin:not([data-uj-theme]) { --uj-bg: #fbf7f7; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f5ecec; --uj-border: #ecdada; --uj-border-strong: #d9b9b9; --uj-text: #2a0d12; --uj-text-2: #5b3036; --uj-text-3: #8a5560; --uj-text-muted: #b08891; --uj-text-inverse: #fff5f5; --uj-accent: #c1272d; --uj-accent-2: #7a0f1a; --uj-accent-soft: #fbe6e7; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #c97a16; --uj-danger: #a61b22; --uj-info: #1f6feb; --uj-link: #a61b22; --uj-link-hover: #7a0f1a; --uj-shadow-sm: 0 1px 2px rgba(122,15,26,0.08); --uj-shadow-md: 0 6px 18px rgba(122,15,26,0.10); --uj-shadow-lg: 0 18px 40px rgba(122,15,26,0.16); --uj-ring: rgba(193,39,45,0.35); --uj-gradient-1: linear-gradient(135deg,#c1272d 0%,#7a0f1a 100%); --uj-gradient-2: radial-gradient(circle at 20% 20%,rgba(193,39,45,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#7a0f1a 0%,#c1272d 50%,#e8636a 100%); --uj-glow: 0 0 20px rgba(193,39,45,0.15); --uj-accent-glow: 0 0 30px rgba(193,39,45,0.25); --uj-surface-glass: rgba(255,255,255,0.72); --uj-chrome: linear-gradient(180deg,#f8f8f8 0%,#e8e8e8 100%); --uj-chrome-text: #555; --uj-gradient-3: linear-gradient(135deg,rgba(193,39,45,0.08) 0%,rgba(122,15,26,0.04) 100%); --uj-accent-hover: #7a0f1a; --uj-surface-alt: #ffffff; --uj-border-color: #ecdada; --uj-text-primary: #2a0d12; --uj-text-secondary: #5b3036; /* Form control tokens — distinct from surface so inputs are visible on cards */ --uj-input-bg: #f8f9fa; --uj-input-border-color: #ced4da; --uj-input-focus-border: var(--uj-accent); --uj-input-focus-ring: 0 0 0 3px rgba(var(--uj-accent-rgb, 193,39,45), 0.2); --uj-input-placeholder: var(--uj-text-3); } .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ */ /* LIGHT THEMES */ /* ============================================================ */ /* ---------- crimson ---------- */ [data-uj-theme="crimson"] { --uj-bg: #fbf7f7; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f5ecec; --uj-border: #ecdada; --uj-border-strong: #d9b9b9; --uj-text: #2a0d12; --uj-text-2: #5b3036; --uj-text-3: #8a5560; --uj-text-muted: #b08891; --uj-text-inverse: #fff5f5; --uj-accent: #c1272d; --uj-accent-2: #7a0f1a; --uj-accent-soft: #fbe6e7; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #c97a16; --uj-danger: #a61b22; --uj-info: #1f6feb; --uj-link: #a61b22; --uj-link-hover: #7a0f1a; --uj-shadow-sm: 0 1px 2px rgba(122,15,26,0.08); --uj-shadow-md: 0 6px 18px rgba(122,15,26,0.10); --uj-shadow-lg: 0 18px 40px rgba(122,15,26,0.16); --uj-ring: rgba(193,39,45,0.35); --uj-gradient-1: linear-gradient(135deg,#c1272d 0%,#7a0f1a 100%); --uj-gradient-2: radial-gradient(circle at 20% 20%,rgba(193,39,45,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#7a0f1a 0%,#c1272d 50%,#e8636a 100%); --uj-glow: 0 0 20px rgba(193,39,45,0.15); --uj-accent-glow: 0 0 30px rgba(193,39,45,0.25); --uj-surface-glass: rgba(255,251,251,0.72); --uj-chrome: linear-gradient(180deg,#faf5f5 0%,#ede0e0 100%); --uj-chrome-text: #5b3036; --uj-gradient-3: linear-gradient(135deg,rgba(193,39,45,0.08) 0%,rgba(122,15,26,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #ecdada; --uj-text-primary: #2a0d12; --uj-text-secondary: #5b3036; --uj-accent-hover: #7a0f1a; } [data-uj-theme="crimson"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- indigo ---------- */ [data-uj-theme="indigo"] { --uj-bg: #f6f7fb; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #eef0f8; --uj-border: #e2e6f1; --uj-border-strong: #c2cae0; --uj-text: #15193b; --uj-text-2: #3b416b; --uj-text-3: #6b7395; --uj-text-muted: #7e87ad; --uj-text-inverse: #f5f7ff; --uj-accent: #4f46e5; --uj-accent-2: #7c3aed; --uj-accent-soft: #eceaff; --uj-accent-text: #ffffff; --uj-success: #0ea372; --uj-warning: #c08300; --uj-danger: #dc2626; --uj-info: #2563eb; --uj-link: #4338ca; --uj-link-hover: #312e81; --uj-shadow-sm: 0 1px 2px rgba(67,56,202,0.08); --uj-shadow-md: 0 6px 18px rgba(67,56,202,0.12); --uj-shadow-lg: 0 18px 40px rgba(67,56,202,0.18); --uj-ring: rgba(79,70,229,0.35); --uj-gradient-1: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); --uj-gradient-2: radial-gradient(circle at 80% 0%,rgba(124,58,237,0.20),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#312e81 0%,#4f46e5 50%,#a855f7 100%); --uj-glow: 0 0 20px rgba(79,70,229,0.15); --uj-accent-glow: 0 0 30px rgba(79,70,229,0.25); --uj-surface-glass: rgba(246,247,251,0.72); --uj-chrome: linear-gradient(180deg,#f0f1fa 0%,#dde1f3 100%); --uj-chrome-text: #3b416b; --uj-gradient-3: linear-gradient(135deg,rgba(79,70,229,0.08) 0%,rgba(124,58,237,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #e2e6f1; --uj-text-primary: #15193b; --uj-text-secondary: #3b416b; --uj-accent-hover: #7c3aed; } [data-uj-theme="indigo"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- emerald ---------- */ [data-uj-theme="emerald"] { --uj-bg: #f3faf6; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #e9f4ee; --uj-border: #d6ebdf; --uj-border-strong: #a8d3bd; --uj-text: #0d2a1c; --uj-text-2: #2f5742; --uj-text-3: #5a7d6c; --uj-text-muted: #718f80; --uj-text-inverse: #f0fdf4; --uj-accent: #0b7e58; --uj-accent-2: #047857; --uj-accent-soft: #d6f5e6; --uj-accent-text: #ffffff; --uj-success: #059669; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #047857; --uj-link-hover: #064e3b; --uj-shadow-sm: 0 1px 2px rgba(4,120,87,0.08); --uj-shadow-md: 0 6px 18px rgba(4,120,87,0.12); --uj-shadow-lg: 0 18px 40px rgba(4,120,87,0.18); --uj-ring: rgba(16,185,129,0.35); --uj-gradient-1: linear-gradient(135deg,#10b981 0%,#047857 100%); --uj-gradient-2: radial-gradient(circle at 100% 100%,rgba(16,185,129,0.22),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#064e3b 0%,#10b981 50%,#34d399 100%); --uj-glow: 0 0 20px rgba(16,185,129,0.15); --uj-accent-glow: 0 0 30px rgba(16,185,129,0.25); --uj-surface-glass: rgba(243,250,246,0.72); --uj-chrome: linear-gradient(180deg,#edf8f2 0%,#d0e8da 100%); --uj-chrome-text: #2f5742; --uj-gradient-3: linear-gradient(135deg,rgba(16,185,129,0.08) 0%,rgba(4,120,87,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #d6ebdf; --uj-text-primary: #0d2a1c; --uj-text-secondary: #2f5742; --uj-accent-hover: #047857; } [data-uj-theme="emerald"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- rose ---------- */ [data-uj-theme="rose"] { --uj-bg: #fdf6f8; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #fbeaef; --uj-border: #f3d6df; --uj-border-strong: #e2a9bb; --uj-text: #3b0a1a; --uj-text-2: #6e2c41; --uj-text-3: #9d5b71; --uj-text-muted: #b3788e; --uj-text-inverse: #fff1f5; --uj-accent: #e11d74; --uj-accent-2: #9d174d; --uj-accent-soft: #ffe1ec; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #c97a16; --uj-danger: #be123c; --uj-info: #2e6df3; --uj-link: #be185d; --uj-link-hover: #831843; --uj-shadow-sm: 0 1px 2px rgba(190,24,93,0.08); --uj-shadow-md: 0 6px 18px rgba(190,24,93,0.12); --uj-shadow-lg: 0 18px 40px rgba(190,24,93,0.18); --uj-ring: rgba(225,29,116,0.35); --uj-gradient-1: linear-gradient(135deg,#e11d74 0%,#9d174d 100%); --uj-gradient-2: radial-gradient(circle at 0% 100%,rgba(225,29,116,0.22),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#831843 0%,#e11d74 50%,#fb7185 100%); --uj-glow: 0 0 20px rgba(225,29,116,0.15); --uj-accent-glow: 0 0 30px rgba(225,29,116,0.25); --uj-surface-glass: rgba(253,246,248,0.72); --uj-chrome: linear-gradient(180deg,#fbf0f3 0%,#f0d4dd 100%); --uj-chrome-text: #6e2c41; --uj-gradient-3: linear-gradient(135deg,rgba(225,29,116,0.08) 0%,rgba(157,23,77,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #f3d6df; --uj-text-primary: #3b0a1a; --uj-text-secondary: #6e2c41; --uj-accent-hover: #9d174d; } [data-uj-theme="rose"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- amber ---------- */ [data-uj-theme="amber"] { --uj-bg: #fdfaf2; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #faf0d9; --uj-border: #f1e2bf; --uj-border-strong: #d9bd80; --uj-text: #3a2606; --uj-text-2: #6b4a14; --uj-text-3: #967231; --uj-text-muted: #a7814d; --uj-text-inverse: #fffaf0; --uj-accent: #a75c05; --uj-accent-2: #92400e; --uj-accent-soft: #fef0d6; --uj-accent-text: #ffffff; --uj-success: #0f8a5c; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0369a1; --uj-link: #b45309; --uj-link-hover: #78350f; --uj-shadow-sm: 0 1px 2px rgba(146,64,14,0.08); --uj-shadow-md: 0 6px 18px rgba(146,64,14,0.12); --uj-shadow-lg: 0 18px 40px rgba(146,64,14,0.18); --uj-ring: rgba(217,119,6,0.35); --uj-gradient-1: linear-gradient(135deg,#fbbf24 0%,#d97706 100%); --uj-gradient-2: radial-gradient(circle at 30% 100%,rgba(217,119,6,0.20),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#78350f 0%,#d97706 50%,#fbbf24 100%); --uj-glow: 0 0 20px rgba(217,119,6,0.15); --uj-accent-glow: 0 0 30px rgba(217,119,6,0.25); --uj-surface-glass: rgba(253,250,242,0.72); --uj-chrome: linear-gradient(180deg,#faf5e8 0%,#f0e2c0 100%); --uj-chrome-text: #6b4a14; --uj-gradient-3: linear-gradient(135deg,rgba(217,119,6,0.08) 0%,rgba(146,64,14,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #f1e2bf; --uj-text-primary: #3a2606; --uj-text-secondary: #6b4a14; --uj-accent-hover: #92400e; } [data-uj-theme="amber"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- pearl ---------- */ [data-uj-theme="pearl"] { --uj-bg: #f7f6f4; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #efece8; --uj-border: #e2dfd9; --uj-border-strong: #c2bdb2; --uj-text: #1f1d1a; --uj-text-2: #4a4742; --uj-text-3: #7a7670; --uj-text-muted: #8e877d; --uj-text-inverse: #fafafa; --uj-accent: #6b543e; --uj-accent-2: #5b4a35; --uj-accent-soft: #ebe5da; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #b87914; --uj-danger: #b13a36; --uj-info: #2c5fa6; --uj-link: #5b4a35; --uj-link-hover: #3d301f; --uj-shadow-sm: 0 1px 2px rgba(60,50,40,0.06); --uj-shadow-md: 0 6px 18px rgba(60,50,40,0.10); --uj-shadow-lg: 0 18px 40px rgba(60,50,40,0.14); --uj-ring: rgba(139,115,85,0.30); --uj-gradient-1: linear-gradient(135deg,#c5b9a4 0%,#8b7355 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(139,115,85,0.16),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#3d301f 0%,#8b7355 50%,#c5b9a4 100%); --uj-glow: 0 0 20px rgba(139,115,85,0.12); --uj-accent-glow: 0 0 30px rgba(139,115,85,0.20); --uj-surface-glass: rgba(247,246,244,0.72); --uj-chrome: linear-gradient(180deg,#f5f3ef 0%,#e0dbd2 100%); --uj-chrome-text: #4a4742; --uj-gradient-3: linear-gradient(135deg,rgba(139,115,85,0.06) 0%,rgba(91,74,53,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #e2dfd9; --uj-text-primary: #1f1d1a; --uj-text-secondary: #4a4742; --uj-accent-hover: #5b4a35; } [data-uj-theme="pearl"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- frost ---------- */ [data-uj-theme="frost"] { --uj-bg: #f3f8fc; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #e6f0f8; --uj-border: #d3e3f1; --uj-border-strong: #a3c3df; --uj-text: #0b2236; --uj-text-2: #284b6b; --uj-text-3: #577794; --uj-text-muted: #6e8aa9; --uj-text-inverse: #f0f9ff; --uj-accent: #0a75a6; --uj-accent-2: #0369a1; --uj-accent-soft: #dbeefb; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #0369a1; --uj-link-hover: #0c4a6e; --uj-shadow-sm: 0 1px 2px rgba(3,105,161,0.08); --uj-shadow-md: 0 6px 18px rgba(3,105,161,0.12); --uj-shadow-lg: 0 18px 40px rgba(3,105,161,0.18); --uj-ring: rgba(14,165,233,0.35); --uj-gradient-1: linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%); --uj-gradient-2: radial-gradient(circle at 50% 0%,rgba(14,165,233,0.20),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#0c4a6e 0%,#0ea5e9 50%,#7dd3fc 100%); --uj-glow: 0 0 20px rgba(14,165,233,0.15); --uj-accent-glow: 0 0 30px rgba(14,165,233,0.25); --uj-surface-glass: rgba(243,248,252,0.72); --uj-chrome: linear-gradient(180deg,#eaf3fb 0%,#c8ddf0 100%); --uj-chrome-text: #284b6b; --uj-gradient-3: linear-gradient(135deg,rgba(14,165,233,0.08) 0%,rgba(3,105,161,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #d3e3f1; --uj-text-primary: #0b2236; --uj-text-secondary: #284b6b; --uj-accent-hover: #0369a1; } [data-uj-theme="frost"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- kenaith (Bootstrap.com inspired) ---------- */ [data-uj-theme="kenaith"] { --uj-bg: #ffffff; --uj-surface: #ffffff; --uj-surface-2: #f8f9fa; --uj-surface-3: #f5f5f5; --uj-border: #dee2e6; --uj-border-strong: #adb5bd; --uj-text: #212529; --uj-text-2: #495057; --uj-text-3: #6c757d; --uj-text-muted: #6c757d; --uj-text-inverse: #ffffff; --uj-accent: #7952B3; --uj-accent-2: #4C0BCE; --uj-accent-soft: #efe7fb; --uj-accent-text: #ffffff; --uj-success: #198754; --uj-warning: #ffc107; --uj-danger: #dc3545; --uj-info: #0dcaf0; --uj-link: #7952B3; --uj-link-hover: #4C0BCE; --uj-shadow-sm: 0 .125rem .25rem rgba(0,0,0,0.075); --uj-shadow-md: 0 .5rem 1rem rgba(0,0,0,0.10); --uj-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175); --uj-ring: rgba(121,82,179,0.30); --uj-gradient-1: linear-gradient(135deg,#7952B3 0%,#4C0BCE 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(121,82,179,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#4C0BCE 0%,#7952B3 50%,#d63384 100%); --uj-glow: 0 0 20px rgba(121,82,179,0.15); --uj-accent-glow: 0 0 30px rgba(121,82,179,0.25); --uj-surface-glass: rgba(255,255,255,0.72); --uj-chrome: linear-gradient(180deg,#f8f9fa 0%,#e9ecef 100%); --uj-chrome-text: #495057; --uj-gradient-3: linear-gradient(135deg,rgba(121,82,179,0.06) 0%,rgba(76,11,206,0.03) 100%); --uj-surface-alt: #f8f9fa; --uj-border-color: #dee2e6; --uj-text-primary: #212529; --uj-text-secondary: #495057; --uj-accent-hover: #4C0BCE; } [data-uj-theme="kenaith"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- linen ---------- */ [data-uj-theme="linen"] { --uj-bg: #faf6ef; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f1ead9; --uj-border: #e6dec8; --uj-border-strong: #c9bd9d; --uj-text: #2a230f; --uj-text-2: #564b2c; --uj-text-3: #857852; --uj-text-muted: #968860; --uj-text-inverse: #fffdf6; --uj-accent: #8a6418; --uj-accent-2: #6f5418; --uj-accent-soft: #f3eacf; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #b87914; --uj-danger: #a61b22; --uj-info: #2c5fa6; --uj-link: #6f5418; --uj-link-hover: #4a380e; --uj-shadow-sm: 0 1px 2px rgba(80,65,30,0.06); --uj-shadow-md: 0 6px 18px rgba(80,65,30,0.10); --uj-shadow-lg: 0 18px 40px rgba(80,65,30,0.14); --uj-ring: rgba(176,133,48,0.30); --uj-gradient-1: linear-gradient(135deg,#d4b86a 0%,#b08530 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(176,133,48,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#4a380e 0%,#b08530 50%,#e6cb88 100%); --uj-glow: 0 0 20px rgba(176,133,48,0.12); --uj-accent-glow: 0 0 30px rgba(176,133,48,0.20); --uj-surface-glass: rgba(250,246,239,0.72); --uj-chrome: linear-gradient(180deg,#f7f2e6 0%,#e8dece 100%); --uj-chrome-text: #564b2c; --uj-gradient-3: linear-gradient(135deg,rgba(176,133,48,0.06) 0%,rgba(111,84,24,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #e6dec8; --uj-text-primary: #2a230f; --uj-text-secondary: #564b2c; --uj-accent-hover: #6f5418; } [data-uj-theme="linen"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- snow ---------- */ [data-uj-theme="snow"] { --uj-bg: #fbfcfd; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f1f4f8; --uj-border: #e3e8ee; --uj-border-strong: #c1c9d4; --uj-text: #0f1a2b; --uj-text-2: #36425a; --uj-text-3: #6a7689; --uj-text-muted: #7d889c; --uj-text-inverse: #ffffff; --uj-accent: #2563eb; --uj-accent-2: #1d4ed8; --uj-accent-soft: #dde9ff; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #1d4ed8; --uj-link-hover: #1e3a8a; --uj-shadow-sm: 0 1px 2px rgba(30,41,90,0.06); --uj-shadow-md: 0 6px 18px rgba(30,41,90,0.10); --uj-shadow-lg: 0 18px 40px rgba(30,41,90,0.14); --uj-ring: rgba(37,99,235,0.30); --uj-gradient-1: linear-gradient(135deg,#60a5fa 0%,#2563eb 100%); --uj-gradient-2: radial-gradient(circle at 100% 50%,rgba(37,99,235,0.16),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#1e3a8a 0%,#2563eb 50%,#60a5fa 100%); --uj-glow: 0 0 20px rgba(37,99,235,0.15); --uj-accent-glow: 0 0 30px rgba(37,99,235,0.25); --uj-surface-glass: rgba(251,252,253,0.72); --uj-chrome: linear-gradient(180deg,#f5f7fa 0%,#dfe5ed 100%); --uj-chrome-text: #36425a; --uj-gradient-3: linear-gradient(135deg,rgba(37,99,235,0.06) 0%,rgba(29,78,216,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #e3e8ee; --uj-text-primary: #0f1a2b; --uj-text-secondary: #36425a; --uj-accent-hover: #1d4ed8; } [data-uj-theme="snow"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- ivory ---------- */ [data-uj-theme="ivory"] { --uj-bg: #fdfcf7; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f5f1e3; --uj-border: #ebe6d2; --uj-border-strong: #d3cba8; --uj-text: #2b2510; --uj-text-2: #564c2c; --uj-text-3: #867a55; --uj-text-muted: #958860; --uj-text-inverse: #fffdf2; --uj-accent: #886b17; --uj-accent-2: #604a0e; --uj-accent-soft: #f5edcb; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #b87914; --uj-danger: #a61b22; --uj-info: #2c5fa6; --uj-link: #604a0e; --uj-link-hover: #3a2c08; --uj-shadow-sm: 0 1px 2px rgba(80,70,30,0.05); --uj-shadow-md: 0 6px 18px rgba(80,70,30,0.09); --uj-shadow-lg: 0 18px 40px rgba(80,70,30,0.13); --uj-ring: rgba(156,122,26,0.30); --uj-gradient-1: linear-gradient(135deg,#d4b86a 0%,#9c7a1a 100%); --uj-gradient-2: radial-gradient(circle at 50% 100%,rgba(156,122,26,0.16),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#3a2c08 0%,#9c7a1a 50%,#d4b86a 100%); --uj-glow: 0 0 20px rgba(156,122,26,0.12); --uj-accent-glow: 0 0 30px rgba(156,122,26,0.20); --uj-surface-glass: rgba(253,252,247,0.72); --uj-chrome: linear-gradient(180deg,#f9f6ea 0%,#e8e2ce 100%); --uj-chrome-text: #564c2c; --uj-gradient-3: linear-gradient(135deg,rgba(156,122,26,0.06) 0%,rgba(96,74,14,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #ebe6d2; --uj-text-primary: #2b2510; --uj-text-secondary: #564c2c; --uj-accent-hover: #604a0e; } [data-uj-theme="ivory"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- porcelain ---------- */ [data-uj-theme="porcelain"] { --uj-bg: #fbfaf8; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f0eee9; --uj-border: #e3e0d8; --uj-border-strong: #c2bdaf; --uj-text: #1c1d1f; --uj-text-2: #46474a; --uj-text-3: #777879; --uj-text-muted: #88898a; --uj-text-inverse: #fafafa; --uj-accent: #5a7d6c; --uj-accent-2: #34503f; --uj-accent-soft: #e2ece5; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #b87914; --uj-danger: #b13a36; --uj-info: #2c5fa6; --uj-link: #34503f; --uj-link-hover: #1f3327; --uj-shadow-sm: 0 1px 2px rgba(40,50,45,0.06); --uj-shadow-md: 0 6px 18px rgba(40,50,45,0.10); --uj-shadow-lg: 0 18px 40px rgba(40,50,45,0.14); --uj-ring: rgba(90,125,108,0.30); --uj-gradient-1: linear-gradient(135deg,#7da08c 0%,#34503f 100%); --uj-gradient-2: radial-gradient(circle at 0% 50%,rgba(90,125,108,0.16),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#1f3327 0%,#5a7d6c 50%,#a8c4b6 100%); --uj-glow: 0 0 20px rgba(90,125,108,0.12); --uj-accent-glow: 0 0 30px rgba(90,125,108,0.20); --uj-surface-glass: rgba(251,250,248,0.72); --uj-chrome: linear-gradient(180deg,#f5f4f0 0%,#dddad2 100%); --uj-chrome-text: #46474a; --uj-gradient-3: linear-gradient(135deg,rgba(90,125,108,0.06) 0%,rgba(52,80,63,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #e3e0d8; --uj-text-primary: #1c1d1f; --uj-text-secondary: #46474a; --uj-accent-hover: #34503f; } [data-uj-theme="porcelain"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- mist ---------- */ [data-uj-theme="mist"] { --uj-bg: #f4f6f7; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #e9edee; --uj-border: #dbe1e3; --uj-border-strong: #b6bfc2; --uj-text: #172025; --uj-text-2: #3a474d; --uj-text-3: #6a777d; --uj-text-muted: #7e8b91; --uj-text-inverse: #f4fbff; --uj-accent: #475569; --uj-accent-2: #1e293b; --uj-accent-soft: #dde4ea; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #2563eb; --uj-link: #1e293b; --uj-link-hover: #0f172a; --uj-shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --uj-shadow-md: 0 6px 18px rgba(15,23,42,0.10); --uj-shadow-lg: 0 18px 40px rgba(15,23,42,0.14); --uj-ring: rgba(71,85,105,0.30); --uj-gradient-1: linear-gradient(135deg,#64748b 0%,#1e293b 100%); --uj-gradient-2: radial-gradient(circle at 100% 100%,rgba(71,85,105,0.16),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#0f172a 0%,#475569 50%,#94a3b8 100%); --uj-glow: 0 0 20px rgba(71,85,105,0.12); --uj-accent-glow: 0 0 30px rgba(71,85,105,0.20); --uj-surface-glass: rgba(244,246,247,0.72); --uj-chrome: linear-gradient(180deg,#eff1f3 0%,#d5dadd 100%); --uj-chrome-text: #3a474d; --uj-gradient-3: linear-gradient(135deg,rgba(71,85,105,0.06) 0%,rgba(30,41,59,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #dbe1e3; --uj-text-primary: #172025; --uj-text-secondary: #3a474d; --uj-accent-hover: #1e293b; } [data-uj-theme="mist"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- platinum ---------- */ [data-uj-theme="platinum"] { --uj-bg: #f3f5f8; --uj-surface: #ffffff; --uj-surface-2: #fbfcfd; --uj-surface-3: #e7ebf0; --uj-border: #dde2e9; --uj-border-strong: #b6bfcc; --uj-text: #0a1628; --uj-text-2: #33415a; --uj-text-3: #5e6b81; --uj-text-muted: #7b89a1; --uj-text-inverse: #fafcff; --uj-accent: #1e63d4; --uj-accent-2: #0b3a8a; --uj-accent-soft: #dbe6f7; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #0b3a8a; --uj-link-hover: #072356; --uj-shadow-sm: 0 1px 2px rgba(11,58,138,0.07); --uj-shadow-md: 0 6px 18px rgba(11,58,138,0.10); --uj-shadow-lg: 0 18px 40px rgba(11,58,138,0.16); --uj-ring: rgba(30,99,212,0.32); --uj-gradient-1: linear-gradient(135deg,#c8d3e2 0%,#1e63d4 100%); --uj-gradient-2: radial-gradient(circle at 30% 30%,rgba(30,99,212,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#0b3a8a 0%,#1e63d4 50%,#9bb3d8 100%); --uj-glow: 0 0 20px rgba(30,99,212,0.15); --uj-accent-glow: 0 0 30px rgba(30,99,212,0.25); --uj-surface-glass: rgba(243,245,248,0.72); --uj-chrome: linear-gradient(180deg,#f0f3f7 0%,#d0d7e2 100%); --uj-chrome-text: #33415a; --uj-gradient-3: linear-gradient(135deg,rgba(30,99,212,0.06) 0%,rgba(11,58,138,0.03) 100%); --uj-surface-alt: #fbfcfd; --uj-border-color: #dde2e9; --uj-text-primary: #0a1628; --uj-text-secondary: #33415a; --uj-accent-hover: #0b3a8a; } [data-uj-theme="platinum"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- sunset ---------- */ [data-uj-theme="sunset"] { --uj-bg: #fff8f1; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #fdecdb; --uj-border: #f6dcc1; --uj-border-strong: #e6b485; --uj-text: #3d1410; --uj-text-2: #7a2d20; --uj-text-3: #b3553e; --uj-text-muted: #ca7050; --uj-text-inverse: #fff5ee; --uj-accent: #d13200; --uj-accent-2: #c2410c; --uj-accent-soft: #ffe1d2; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #c2410c; --uj-danger: #9f1239; --uj-info: #2563eb; --uj-link: #c2410c; --uj-link-hover: #7c2d12; --uj-shadow-sm: 0 1px 2px rgba(194,65,12,0.08); --uj-shadow-md: 0 8px 22px rgba(194,65,12,0.14); --uj-shadow-lg: 0 22px 48px rgba(194,65,12,0.20); --uj-ring: rgba(255,107,61,0.36); --uj-gradient-1: linear-gradient(135deg,#ffb068 0%,#ff6b3d 50%,#9f1239 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(255,107,61,0.26),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#9f1239 0%,#ff6b3d 50%,#ffb068 100%); --uj-glow: 0 0 20px rgba(255,107,61,0.15); --uj-accent-glow: 0 0 30px rgba(255,107,61,0.25); --uj-surface-glass: rgba(255,248,241,0.72); --uj-chrome: linear-gradient(180deg,#fff3e6 0%,#f0d4ba 100%); --uj-chrome-text: #7a2d20; --uj-gradient-3: linear-gradient(135deg,rgba(255,107,61,0.08) 0%,rgba(194,65,12,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #f6dcc1; --uj-text-primary: #3d1410; --uj-text-secondary: #7a2d20; --uj-accent-hover: #c2410c; } [data-uj-theme="sunset"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- jade ---------- */ [data-uj-theme="jade"] { --uj-bg: #f1f8f4; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #e3f1e8; --uj-border: #cfe6d6; --uj-border-strong: #9fcdb1; --uj-text: #08221a; --uj-text-2: #244c3a; --uj-text-3: #52806a; --uj-text-muted: #639277; --uj-text-inverse: #f0fdf6; --uj-accent: #0b7d72; --uj-accent-2: #065f54; --uj-accent-soft: #cdeee8; --uj-accent-text: #ffffff; --uj-success: #059669; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #065f54; --uj-link-hover: #053e36; --uj-shadow-sm: 0 1px 2px rgba(6,95,84,0.08); --uj-shadow-md: 0 6px 18px rgba(6,95,84,0.12); --uj-shadow-lg: 0 18px 40px rgba(6,95,84,0.18); --uj-ring: rgba(13,148,136,0.34); --uj-gradient-1: linear-gradient(135deg,#34d399 0%,#0d9488 50%,#065f54 100%); --uj-gradient-2: radial-gradient(circle at 100% 100%,rgba(13,148,136,0.22),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#053e36 0%,#0d9488 50%,#6ee7b7 100%); --uj-glow: 0 0 20px rgba(13,148,136,0.15); --uj-accent-glow: 0 0 30px rgba(13,148,136,0.25); --uj-surface-glass: rgba(241,248,244,0.72); --uj-chrome: linear-gradient(180deg,#e9f5ee 0%,#c4e0d0 100%); --uj-chrome-text: #244c3a; --uj-gradient-3: linear-gradient(135deg,rgba(13,148,136,0.08) 0%,rgba(6,95,84,0.04) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #cfe6d6; --uj-text-primary: #08221a; --uj-text-secondary: #244c3a; --uj-accent-hover: #065f54; } [data-uj-theme="jade"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ */ /* NEW PREMIUM LIGHT THEMES */ /* ============================================================ */ /* ---------- champagne — warm gold / cream luxury ---------- */ [data-uj-theme="champagne"] { --uj-bg: #fdfaf3; --uj-surface: #ffffff; --uj-surface-2: #fefcf7; --uj-surface-3: #f8f0d8; --uj-border: #efe5c7; --uj-border-strong: #d9c896; --uj-text: #2c1e06; --uj-text-2: #6b5220; --uj-text-3: #9a8550; --uj-text-muted: #b09a62; --uj-text-inverse: #fefcf4; --uj-accent: #b8860b; --uj-accent-2: #8b6508; --uj-accent-soft: #f7ecd0; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0369a1; --uj-link: #8b6508; --uj-link-hover: #5c4305; --uj-shadow-sm: 0 1px 2px rgba(139,101,8,0.07); --uj-shadow-md: 0 6px 18px rgba(184,134,11,0.12); --uj-shadow-lg: 0 18px 40px rgba(184,134,11,0.18); --uj-ring: rgba(184,134,11,0.35); --uj-gradient-1: linear-gradient(135deg,#daa520 0%,#b8860b 50%,#8b6508 100%); --uj-gradient-2: radial-gradient(circle at 80% 20%,rgba(218,165,32,0.20),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#5c4305 0%,#b8860b 50%,#daa520 100%); --uj-glow: 0 0 20px rgba(184,134,11,0.18); --uj-accent-glow: 0 0 30px rgba(218,165,32,0.30); --uj-surface-glass: rgba(253,250,243,0.72); --uj-chrome: linear-gradient(180deg,#f9f4e4 0%,#e8ddb8 100%); --uj-chrome-text: #6b5220; --uj-gradient-3: linear-gradient(135deg,rgba(184,134,11,0.08) 0%,rgba(139,101,8,0.04) 100%); --uj-surface-alt: #fefcf7; --uj-border-color: #efe5c7; --uj-text-primary: #2c1e06; --uj-text-secondary: #6b5220; --uj-accent-hover: #8b6508; } [data-uj-theme="champagne"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- arctic — ice blue / crystal white ---------- */ [data-uj-theme="arctic"] { --uj-bg: #f5faff; --uj-surface: #ffffff; --uj-surface-2: #f8fbff; --uj-surface-3: #e8f2ff; --uj-border: #d6e6f8; --uj-border-strong: #a8c8e8; --uj-text: #0a1929; --uj-text-2: #1e3a5c; --uj-text-3: #4a6a8a; --uj-text-muted: #6b89a5; --uj-text-inverse: #f0f7ff; --uj-accent: #0077c8; --uj-accent-2: #005a99; --uj-accent-soft: #dceefb; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #005a99; --uj-link-hover: #003d66; --uj-shadow-sm: 0 1px 2px rgba(0,119,200,0.08); --uj-shadow-md: 0 6px 18px rgba(0,119,200,0.12); --uj-shadow-lg: 0 18px 40px rgba(0,119,200,0.18); --uj-ring: rgba(0,119,200,0.35); --uj-gradient-1: linear-gradient(135deg,#00b4db 0%,#0077c8 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(0,180,219,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#003d66 0%,#0077c8 50%,#00b4db 100%); --uj-glow: 0 0 20px rgba(0,119,200,0.15); --uj-accent-glow: 0 0 30px rgba(0,180,219,0.25); --uj-surface-glass: rgba(245,250,255,0.75); --uj-chrome: linear-gradient(180deg,#edf4ff 0%,#c5daf5 100%); --uj-chrome-text: #1e3a5c; --uj-gradient-3: linear-gradient(135deg,rgba(0,119,200,0.06) 0%,rgba(0,90,153,0.03) 100%); --uj-surface-alt: #f8fbff; --uj-border-color: #d6e6f8; --uj-text-primary: #0a1929; --uj-text-secondary: #1e3a5c; --uj-accent-hover: #005a99; } [data-uj-theme="arctic"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- sapphire — rich deep blue / enterprise ---------- */ [data-uj-theme="sapphire"] { --uj-bg: #f4f6fb; --uj-surface: #ffffff; --uj-surface-2: #fafbff; --uj-surface-3: #e6ecf8; --uj-border: #d0d8ed; --uj-border-strong: #a3b3d4; --uj-text: #0a0f2e; --uj-text-2: #1e2d5e; --uj-text-3: #4a5888; --uj-text-muted: #6b76a0; --uj-text-inverse: #f0f3ff; --uj-accent: #1a3fc7; --uj-accent-2: #0d247f; --uj-accent-soft: #dce3fb; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #2563eb; --uj-link: #0d247f; --uj-link-hover: #071450; --uj-shadow-sm: 0 1px 2px rgba(26,63,199,0.08); --uj-shadow-md: 0 6px 18px rgba(26,63,199,0.14); --uj-shadow-lg: 0 18px 40px rgba(26,63,199,0.22); --uj-ring: rgba(26,63,199,0.38); --uj-gradient-1: linear-gradient(135deg,#3b6cf5 0%,#1a3fc7 50%,#0d247f 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(59,108,245,0.22),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#071450 0%,#1a3fc7 50%,#6b9bff 100%); --uj-glow: 0 0 20px rgba(26,63,199,0.18); --uj-accent-glow: 0 0 30px rgba(59,108,245,0.30); --uj-surface-glass: rgba(244,246,251,0.75); --uj-chrome: linear-gradient(180deg,#edf0fb 0%,#c7d0ef 100%); --uj-chrome-text: #1e2d5e; --uj-gradient-3: linear-gradient(135deg,rgba(26,63,199,0.08) 0%,rgba(13,36,127,0.04) 100%); --uj-surface-alt: #fafbff; --uj-border-color: #d0d8ed; --uj-text-primary: #0a0f2e; --uj-text-secondary: #1e2d5e; --uj-accent-hover: #0d247f; } [data-uj-theme="sapphire"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- copper — warm metallic / industrial luxury ---------- */ [data-uj-theme="copper"] { --uj-bg: #faf6f2; --uj-surface: #ffffff; --uj-surface-2: #fdfaf7; --uj-surface-3: #f2e8dc; --uj-border: #e4d5c2; --uj-border-strong: #c9ad8a; --uj-text: #2a1a0a; --uj-text-2: #6b4a28; --uj-text-3: #9a7548; --uj-text-muted: #b08a55; --uj-text-inverse: #fef8f0; --uj-accent: #b87333; --uj-accent-2: #8b5520; --uj-accent-soft: #f5e4d0; --uj-accent-text: #ffffff; --uj-success: #1f8a5c; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0369a1; --uj-link: #8b5520; --uj-link-hover: #5c3a14; --uj-shadow-sm: 0 1px 2px rgba(139,85,32,0.08); --uj-shadow-md: 0 6px 18px rgba(184,115,51,0.12); --uj-shadow-lg: 0 18px 40px rgba(184,115,51,0.18); --uj-ring: rgba(184,115,51,0.35); --uj-gradient-1: linear-gradient(135deg,#d4956a 0%,#b87333 50%,#8b5520 100%); --uj-gradient-2: radial-gradient(circle at 20% 80%,rgba(212,149,106,0.20),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#5c3a14 0%,#b87333 50%,#d4956a 100%); --uj-glow: 0 0 20px rgba(184,115,51,0.15); --uj-accent-glow: 0 0 30px rgba(184,115,51,0.25); --uj-surface-glass: rgba(250,246,242,0.72); --uj-chrome: linear-gradient(180deg,#f5ece0 0%,#ddc9ad 100%); --uj-chrome-text: #6b4a28; --uj-gradient-3: linear-gradient(135deg,rgba(184,115,51,0.08) 0%,rgba(139,85,32,0.04) 100%); --uj-surface-alt: #fdfaf7; --uj-border-color: #e4d5c2; --uj-text-primary: #2a1a0a; --uj-text-secondary: #6b4a28; --uj-accent-hover: #8b5520; } [data-uj-theme="copper"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- forest — deep woodland green ---------- */ [data-uj-theme="forest"] { --uj-bg: #f0f5f1; --uj-surface: #ffffff; --uj-surface-2: #f8faf8; --uj-surface-3: #dde8df; --uj-border: #c5d8c8; --uj-border-strong: #92b498; --uj-text: #0a1f0e; --uj-text-2: #1e4a25; --uj-text-3: #3d7045; --uj-text-muted: #5a8a60; --uj-text-inverse: #f0fdf2; --uj-accent: #2d6a30; --uj-accent-2: #1a472a; --uj-accent-soft: #d6edda; --uj-accent-text: #ffffff; --uj-success: #059669; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #1a472a; --uj-link-hover: #0d2818; --uj-shadow-sm: 0 1px 2px rgba(26,71,42,0.08); --uj-shadow-md: 0 6px 18px rgba(45,106,48,0.12); --uj-shadow-lg: 0 18px 40px rgba(45,106,48,0.18); --uj-ring: rgba(45,106,48,0.35); --uj-gradient-1: linear-gradient(135deg,#4ade80 0%,#2d6a30 50%,#1a472a 100%); --uj-gradient-2: radial-gradient(circle at 100% 100%,rgba(74,222,128,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#0d2818 0%,#2d6a30 50%,#4ade80 100%); --uj-glow: 0 0 20px rgba(45,106,48,0.15); --uj-accent-glow: 0 0 30px rgba(74,222,128,0.25); --uj-surface-glass: rgba(240,245,241,0.72); --uj-chrome: linear-gradient(180deg,#e6efe8 0%,#b8d4bc 100%); --uj-chrome-text: #1e4a25; --uj-gradient-3: linear-gradient(135deg,rgba(45,106,48,0.08) 0%,rgba(26,71,42,0.04) 100%); --uj-surface-alt: #f8faf8; --uj-border-color: #c5d8c8; --uj-text-primary: #0a1f0e; --uj-text-secondary: #1e4a25; --uj-accent-hover: #1a472a; } [data-uj-theme="forest"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ */ /* DARK THEMES */ /* ============================================================ */ /* ---------- midnight ---------- */ [data-uj-theme="midnight"] { --uj-bg: #0b1020; --uj-surface: #131a30; --uj-surface-2: #1a2342; --uj-surface-3: #0e152b; --uj-border: #222b4a; --uj-border-strong: #3a4775; --uj-text: #f3f5fa; --uj-text-2: #c1c8de; --uj-text-3: #8d97b8; --uj-text-muted: #5e6890; --uj-text-inverse: #0b1020; --uj-accent: #7c3aed; --uj-accent-2: #4338ca; --uj-accent-soft: #1e1a4a; --uj-accent-text: #ffffff; --uj-success: #34d399; --uj-warning: #fbbf24; --uj-danger: #f87171; --uj-info: #60a5fa; --uj-link: #a5b4fc; --uj-link-hover: #c4b5fd; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --uj-shadow-md: 0 8px 22px rgba(0,0,0,0.55); --uj-shadow-lg: 0 24px 50px rgba(0,0,0,0.65); --uj-ring: rgba(124,58,237,0.55); --uj-gradient-1: linear-gradient(135deg,#7c3aed 0%,#4338ca 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(124,58,237,0.30),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#a5b4fc 0%,#c4b5fd 50%,#f0abfc 100%); --uj-glow: 0 0 20px rgba(124,58,237,0.20); --uj-accent-glow: 0 0 30px rgba(124,58,237,0.35); --uj-surface-glass: rgba(19,26,48,0.78); --uj-chrome: linear-gradient(180deg,#1a2342 0%,#0e152b 100%); --uj-chrome-text: #c1c8de; --uj-gradient-3: linear-gradient(135deg,rgba(124,58,237,0.12) 0%,rgba(67,56,202,0.06) 100%); --uj-surface-alt: #1a2342; --uj-border-color: #222b4a; --uj-text-primary: #f3f5fa; --uj-text-secondary: #c1c8de; --uj-accent-hover: #4338ca; } [data-uj-theme="midnight"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- slate ---------- */ [data-uj-theme="slate"] { --uj-bg: #0f172a; --uj-surface: #1a2236; --uj-surface-2: #222c44; --uj-surface-3: #131b2e; --uj-border: #2a3450; --uj-border-strong: #3d4a6b; --uj-text: #f1f5f9; --uj-text-2: #c4ccd8; --uj-text-3: #8d97a8; --uj-text-muted: #6d778c; --uj-text-inverse: #0f172a; --uj-accent: #0a75a6; --uj-accent-2: #0369a1; --uj-accent-soft: #0e2a3d; --uj-accent-text: #ffffff; --uj-success: #22c55e; --uj-warning: #eab308; --uj-danger: #ef4444; --uj-info: #38bdf8; --uj-link: #7dd3fc; --uj-link-hover: #bae6fd; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --uj-shadow-md: 0 8px 22px rgba(0,0,0,0.50); --uj-shadow-lg: 0 24px 50px rgba(0,0,0,0.60); --uj-ring: rgba(14,165,233,0.50); --uj-gradient-1: linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(14,165,233,0.26),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#7dd3fc 0%,#38bdf8 50%,#a5f3fc 100%); --uj-glow: 0 0 20px rgba(14,165,233,0.18); --uj-accent-glow: 0 0 30px rgba(14,165,233,0.30); --uj-surface-glass: rgba(26,34,54,0.78); --uj-chrome: linear-gradient(180deg,#222c44 0%,#131b2e 100%); --uj-chrome-text: #c4ccd8; --uj-gradient-3: linear-gradient(135deg,rgba(14,165,233,0.10) 0%,rgba(3,105,161,0.05) 100%); --uj-surface-alt: #222c44; --uj-border-color: #2a3450; --uj-text-primary: #f1f5f9; --uj-text-secondary: #c4ccd8; --uj-accent-hover: #0369a1; } [data-uj-theme="slate"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- obsidian ---------- */ [data-uj-theme="obsidian"] { --uj-bg: #08090d; --uj-surface: #13151c; --uj-surface-2: #1c1f29; --uj-surface-3: #0d0e14; --uj-border: #23262f; --uj-border-strong: #3c4150; --uj-text: #f5f7fb; --uj-text-2: #bdc4d2; --uj-text-3: #7c8395; --uj-text-muted: #656d83; --uj-text-inverse: #08090d; --uj-accent: #00e5ff; --uj-accent-2: #ff2bd6; --uj-accent-soft: #0a3340; --uj-accent-text: #08090d; --uj-success: #10e094; --uj-warning: #ffb020; --uj-danger: #ff5470; --uj-info: #5ce1e6; --uj-link: #5cf2ff; --uj-link-hover: #a8f7ff; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.55); --uj-shadow-md: 0 10px 26px rgba(0,229,255,0.12); --uj-shadow-lg: 0 28px 60px rgba(255,43,214,0.18); --uj-ring: rgba(0,229,255,0.55); --uj-gradient-1: linear-gradient(135deg,#00e5ff 0%,#7c3aed 50%,#ff2bd6 100%); --uj-gradient-2: radial-gradient(circle at 100% 100%,rgba(255,43,214,0.30),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#00e5ff 0%,#a855f7 50%,#ff2bd6 100%); --uj-glow: 0 0 20px rgba(0,229,255,0.20); --uj-accent-glow: 0 0 30px rgba(0,229,255,0.35); --uj-surface-glass: rgba(19,21,28,0.82); --uj-chrome: linear-gradient(180deg,#1c1f29 0%,#0d0e14 100%); --uj-chrome-text: #bdc4d2; --uj-gradient-3: linear-gradient(135deg,rgba(0,229,255,0.10) 0%,rgba(255,43,214,0.05) 100%); --uj-surface-alt: #1c1f29; --uj-border-color: #23262f; --uj-text-primary: #f5f7fb; --uj-text-secondary: #bdc4d2; --uj-accent-hover: #ff2bd6; } [data-uj-theme="obsidian"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- royal ---------- */ [data-uj-theme="royal"] { --uj-bg: #160d2a; --uj-surface: #211640; --uj-surface-2: #2c1e54; --uj-surface-3: #180f2f; --uj-border: #352566; --uj-border-strong: #523a8c; --uj-text: #fbf6e6; --uj-text-2: #d8c9b1; --uj-text-3: #a59678; --uj-text-muted: #766a52; --uj-text-inverse: #160d2a; --uj-accent: #d4af37; --uj-accent-2: #8b6914; --uj-accent-soft: #3a2a08; --uj-accent-text: #160d2a; --uj-success: #34d399; --uj-warning: #f59e0b; --uj-danger: #f87171; --uj-info: #a5b4fc; --uj-link: #e8c970; --uj-link-hover: #fde68a; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.50); --uj-shadow-md: 0 10px 26px rgba(0,0,0,0.55); --uj-shadow-lg: 0 28px 60px rgba(212,175,55,0.20); --uj-ring: rgba(212,175,55,0.50); --uj-gradient-1: linear-gradient(135deg,#d4af37 0%,#8b6914 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(212,175,55,0.22),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#fde68a 0%,#d4af37 50%,#8b6914 100%); --uj-glow: 0 0 20px rgba(212,175,55,0.20); --uj-accent-glow: 0 0 30px rgba(212,175,55,0.35); --uj-surface-glass: rgba(33,22,64,0.82); --uj-chrome: linear-gradient(180deg,#2c1e54 0%,#180f2f 100%); --uj-chrome-text: #d8c9b1; --uj-gradient-3: linear-gradient(135deg,rgba(212,175,55,0.12) 0%,rgba(139,105,20,0.06) 100%); --uj-surface-alt: #2c1e54; --uj-border-color: #352566; --uj-text-primary: #fbf6e6; --uj-text-secondary: #d8c9b1; --uj-accent-hover: #8b6914; } [data-uj-theme="royal"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- nebula ---------- */ [data-uj-theme="nebula"] { --uj-bg: #0a0a1f; --uj-surface: #15162e; --uj-surface-2: #1d1f3d; --uj-surface-3: #0d0e22; --uj-border: #272a4d; --uj-border-strong: #454985; --uj-text: #f6f5ff; --uj-text-2: #c8c5e8; --uj-text-3: #8d8ab8; --uj-text-muted: #6e6a99; --uj-text-inverse: #0a0a1f; --uj-accent: #9333ea; --uj-accent-2: #ec4899; --uj-accent-soft: #2a1a4a; --uj-accent-text: #ffffff; --uj-success: #34d399; --uj-warning: #fbbf24; --uj-danger: #fb7185; --uj-info: #60a5fa; --uj-link: #d8b4fe; --uj-link-hover: #f0abfc; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.50); --uj-shadow-md: 0 10px 26px rgba(168,85,247,0.18); --uj-shadow-lg: 0 28px 60px rgba(236,72,153,0.22); --uj-ring: rgba(168,85,247,0.55); --uj-gradient-1: linear-gradient(135deg,#4f46e5 0%,#a855f7 50%,#ec4899 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(236,72,153,0.30),transparent 55%),radial-gradient(circle at 0% 100%,rgba(79,70,229,0.30),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#60a5fa 0%,#a855f7 33%,#ec4899 66%,#fb923c 100%); --uj-glow: 0 0 20px rgba(168,85,247,0.20); --uj-accent-glow: 0 0 30px rgba(168,85,247,0.35); --uj-surface-glass: rgba(21,22,46,0.82); --uj-chrome: linear-gradient(180deg,#1d1f3d 0%,#0d0e22 100%); --uj-chrome-text: #c8c5e8; --uj-gradient-3: linear-gradient(135deg,rgba(168,85,247,0.10) 0%,rgba(236,72,153,0.05) 100%); --uj-surface-alt: #1d1f3d; --uj-border-color: #272a4d; --uj-text-primary: #f6f5ff; --uj-text-secondary: #c8c5e8; --uj-accent-hover: #ec4899; } [data-uj-theme="nebula"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ */ /* NEW PREMIUM DARK THEMES */ /* ============================================================ */ /* ---------- onyx — deep black with warm gold accents ---------- */ [data-uj-theme="onyx"] { --uj-bg: #050505; --uj-surface: #0f0f0f; --uj-surface-2: #181818; --uj-surface-3: #0a0a0a; --uj-border: #2a2a2a; --uj-border-strong: #404040; --uj-text: #f5f0e8; --uj-text-2: #c8bfa8; --uj-text-3: #8a8070; --uj-text-muted: #6a6050; --uj-text-inverse: #050505; --uj-accent: #d4a853; --uj-accent-2: #a17c2f; --uj-accent-soft: #1f1a0a; --uj-accent-text: #050505; --uj-success: #34d399; --uj-warning: #fbbf24; --uj-danger: #f87171; --uj-info: #60a5fa; --uj-link: #e8c970; --uj-link-hover: #fde68a; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.60); --uj-shadow-md: 0 10px 26px rgba(0,0,0,0.70); --uj-shadow-lg: 0 28px 60px rgba(212,168,83,0.15); --uj-ring: rgba(212,168,83,0.50); --uj-gradient-1: linear-gradient(135deg,#d4a853 0%,#a17c2f 50%,#6b5020 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(212,168,83,0.25),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#fde68a 0%,#d4a853 50%,#a17c2f 100%); --uj-glow: 0 0 20px rgba(212,168,83,0.20); --uj-accent-glow: 0 0 30px rgba(212,168,83,0.35); --uj-surface-glass: rgba(15,15,15,0.85); --uj-chrome: linear-gradient(180deg,#181818 0%,#0a0a0a 100%); --uj-chrome-text: #c8bfa8; --uj-gradient-3: linear-gradient(135deg,rgba(212,168,83,0.10) 0%,rgba(161,124,47,0.05) 100%); --uj-surface-alt: #181818; --uj-border-color: #2a2a2a; --uj-text-primary: #f5f0e8; --uj-text-secondary: #c8bfa8; --uj-accent-hover: #a17c2f; } [data-uj-theme="onyx"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- carbon — charcoal with electric blue ---------- */ [data-uj-theme="carbon"] { --uj-bg: #0d0d0f; --uj-surface: #161618; --uj-surface-2: #1e1e22; --uj-surface-3: #111113; --uj-border: #2c2c32; --uj-border-strong: #44444e; --uj-text: #eef0f6; --uj-text-2: #b8bcc8; --uj-text-3: #787e90; --uj-text-muted: #5a5e70; --uj-text-inverse: #0d0d0f; --uj-accent: #3b82f6; --uj-accent-2: #1d4ed8; --uj-accent-soft: #0f172a; --uj-accent-text: #ffffff; --uj-success: #22c55e; --uj-warning: #eab308; --uj-danger: #ef4444; --uj-info: #38bdf8; --uj-link: #93c5fd; --uj-link-hover: #bfdbfe; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.55); --uj-shadow-md: 0 10px 26px rgba(59,130,246,0.12); --uj-shadow-lg: 0 28px 60px rgba(59,130,246,0.18); --uj-ring: rgba(59,130,246,0.50); --uj-gradient-1: linear-gradient(135deg,#3b82f6 0%,#1d4ed8 50%,#1e40af 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(59,130,246,0.25),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#93c5fd 0%,#3b82f6 50%,#1d4ed8 100%); --uj-glow: 0 0 20px rgba(59,130,246,0.18); --uj-accent-glow: 0 0 30px rgba(59,130,246,0.30); --uj-surface-glass: rgba(22,22,24,0.85); --uj-chrome: linear-gradient(180deg,#1e1e22 0%,#111113 100%); --uj-chrome-text: #b8bcc8; --uj-gradient-3: linear-gradient(135deg,rgba(59,130,246,0.10) 0%,rgba(29,78,216,0.05) 100%); --uj-surface-alt: #1e1e22; --uj-border-color: #2c2c32; --uj-text-primary: #eef0f6; --uj-text-secondary: #b8bcc8; --uj-accent-hover: #1d4ed8; } [data-uj-theme="carbon"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- abyss — deepest ocean / bioluminescent ---------- */ [data-uj-theme="abyss"] { --uj-bg: #020810; --uj-surface: #081020; --uj-surface-2: #0d1830; --uj-surface-3: #050c18; --uj-border: #152040; --uj-border-strong: #203560; --uj-text: #e0f0ff; --uj-text-2: #90b8d8; --uj-text-3: #5080a8; --uj-text-muted: #306080; --uj-text-inverse: #020810; --uj-accent: #00b4d8; --uj-accent-2: #0077b6; --uj-accent-soft: #051525; --uj-accent-text: #020810; --uj-success: #2dd4bf; --uj-warning: #fbbf24; --uj-danger: #fb7185; --uj-info: #38bdf8; --uj-link: #67e8f9; --uj-link-hover: #a5f3fc; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.60); --uj-shadow-md: 0 10px 26px rgba(0,180,216,0.15); --uj-shadow-lg: 0 28px 60px rgba(0,180,216,0.22); --uj-ring: rgba(0,180,216,0.55); --uj-gradient-1: linear-gradient(135deg,#00b4d8 0%,#0077b6 50%,#03045e 100%); --uj-gradient-2: radial-gradient(circle at 50% 100%,rgba(0,180,216,0.30),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#a5f3fc 0%,#00b4d8 50%,#0077b6 100%); --uj-glow: 0 0 20px rgba(0,180,216,0.20); --uj-accent-glow: 0 0 30px rgba(0,180,216,0.35); --uj-surface-glass: rgba(8,16,32,0.85); --uj-chrome: linear-gradient(180deg,#0d1830 0%,#050c18 100%); --uj-chrome-text: #90b8d8; --uj-gradient-3: linear-gradient(135deg,rgba(0,180,216,0.10) 0%,rgba(0,119,182,0.05) 100%); --uj-surface-alt: #0d1830; --uj-border-color: #152040; --uj-text-primary: #e0f0ff; --uj-text-secondary: #90b8d8; --uj-accent-hover: #0077b6; } [data-uj-theme="abyss"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- cosmos — dark violet / starlight silver ---------- */ [data-uj-theme="cosmos"] { --uj-bg: #0c0515; --uj-surface: #140a22; --uj-surface-2: #1c1035; --uj-surface-3: #10071a; --uj-border: #2a1848; --uj-border-strong: #452878; --uj-text: #f0e8ff; --uj-text-2: #c4b0e0; --uj-text-3: #8a70b0; --uj-text-muted: #6a5588; --uj-text-inverse: #0c0515; --uj-accent: #a78bfa; --uj-accent-2: #7c3aed; --uj-accent-soft: #1a0f30; --uj-accent-text: #0c0515; --uj-success: #34d399; --uj-warning: #fbbf24; --uj-danger: #fb7185; --uj-info: #60a5fa; --uj-link: #c4b5fd; --uj-link-hover: #e0d5ff; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.55); --uj-shadow-md: 0 10px 26px rgba(167,139,250,0.15); --uj-shadow-lg: 0 28px 60px rgba(167,139,250,0.22); --uj-ring: rgba(167,139,250,0.55); --uj-gradient-1: linear-gradient(135deg,#a78bfa 0%,#7c3aed 50%,#4c1d95 100%); --uj-gradient-2: radial-gradient(circle at 100% 0%,rgba(167,139,250,0.28),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#e0d5ff 0%,#a78bfa 50%,#7c3aed 100%); --uj-glow: 0 0 20px rgba(167,139,250,0.20); --uj-accent-glow: 0 0 30px rgba(167,139,250,0.35); --uj-surface-glass: rgba(20,10,34,0.85); --uj-chrome: linear-gradient(180deg,#1c1035 0%,#10071a 100%); --uj-chrome-text: #c4b0e0; --uj-gradient-3: linear-gradient(135deg,rgba(167,139,250,0.10) 0%,rgba(124,58,237,0.05) 100%); --uj-surface-alt: #1c1035; --uj-border-color: #2a1848; --uj-text-primary: #f0e8ff; --uj-text-secondary: #c4b0e0; --uj-accent-hover: #7c3aed; } [data-uj-theme="cosmos"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- vault — secure enterprise / titanium green ---------- */ [data-uj-theme="vault"] { --uj-bg: #060d0a; --uj-surface: #0c1a12; --uj-surface-2: #142218; --uj-surface-3: #091008; --uj-border: #1e3525; --uj-border-strong: #2d5038; --uj-text: #e8f5ee; --uj-text-2: #a8d0b8; --uj-text-3: #609870; --uj-text-muted: #407050; --uj-text-inverse: #060d0a; --uj-accent: #10b981; --uj-accent-2: #047857; --uj-accent-soft: #081a12; --uj-accent-text: #060d0a; --uj-success: #34d399; --uj-warning: #fbbf24; --uj-danger: #f87171; --uj-info: #38bdf8; --uj-link: #6ee7b7; --uj-link-hover: #a7f3d0; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.60); --uj-shadow-md: 0 10px 26px rgba(16,185,129,0.12); --uj-shadow-lg: 0 28px 60px rgba(16,185,129,0.18); --uj-ring: rgba(16,185,129,0.50); --uj-gradient-1: linear-gradient(135deg,#10b981 0%,#047857 50%,#064e3b 100%); --uj-gradient-2: radial-gradient(circle at 0% 100%,rgba(16,185,129,0.25),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#a7f3d0 0%,#10b981 50%,#047857 100%); --uj-glow: 0 0 20px rgba(16,185,129,0.18); --uj-accent-glow: 0 0 30px rgba(16,185,129,0.30); --uj-surface-glass: rgba(12,26,18,0.85); --uj-chrome: linear-gradient(180deg,#142218 0%,#091008 100%); --uj-chrome-text: #a8d0b8; --uj-gradient-3: linear-gradient(135deg,rgba(16,185,129,0.10) 0%,rgba(4,120,87,0.05) 100%); --uj-surface-alt: #142218; --uj-border-color: #1e3525; --uj-text-primary: #e8f5ee; --uj-text-secondary: #a8d0b8; --uj-accent-hover: #047857; } [data-uj-theme="vault"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- mightytheme — SimpleDash teal #48b9d5, clean white surface ---------- */ [data-uj-theme="mightytheme"] { --uj-bg: #f4f8fb; --uj-surface: #ffffff; --uj-surface-2: #f8fafb; --uj-surface-3: #edf4f7; --uj-border: #dce5ed; --uj-border-strong: #b8ccdb; --uj-text: #1a2430; --uj-text-2: #3d5065; --uj-text-3: #60758a; --uj-text-muted: #8a9bb0; --uj-text-inverse: #f4f8fb; --uj-accent: #48b9d5; --uj-accent-2: #2a8ca8; --uj-accent-soft: #e3f4f9; --uj-accent-text: #ffffff; --uj-success: #10b981; --uj-warning: #f59e0b; --uj-danger: #ef4444; --uj-info: #3b82f6; --uj-link: #2a8ca8; --uj-link-hover: #48b9d5; --uj-shadow-sm: 0 1px 2px rgba(42,140,168,0.06); --uj-shadow-md: 0 6px 16px rgba(42,140,168,0.09); --uj-shadow-lg: 0 16px 36px rgba(42,140,168,0.14); --uj-ring: rgba(72,185,213,0.35); --uj-gradient-1: linear-gradient(135deg,#48b9d5 0%,#2a8ca8 100%); --uj-gradient-2: radial-gradient(circle at 30% 30%,rgba(72,185,213,0.15),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#2a8ca8 0%,#48b9d5 50%,#7dd3e8 100%); --uj-glow: 0 0 20px rgba(72,185,213,0.15); --uj-accent-glow: 0 0 30px rgba(72,185,213,0.22); --uj-surface-glass: rgba(255,255,255,0.78); --uj-chrome: linear-gradient(180deg,#f8fafc 0%,#e8f0f6 100%); --uj-chrome-text: #3d5065; --uj-gradient-3: linear-gradient(135deg,rgba(72,185,213,0.08) 0%,rgba(42,140,168,0.04) 100%); --uj-surface-alt: #f8fafb; --uj-border-color: #dce5ed; --uj-text-primary: #1a2430; --uj-text-secondary: #3d5065; --uj-accent-hover: #2a8ca8; } [data-uj-theme="mightytheme"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ */ /* ULTRA-PREMIUM THEMES */ /* ============================================================ */ /* ---------- diamond — crystalline luxury / enterprise clean ---------- */ [data-uj-theme="diamond"] { --uj-bg: #f8fafc; --uj-surface: #ffffff; --uj-surface-2: #ffffff; --uj-surface-3: #f1f5f9; --uj-border: #e2e8f0; --uj-border-strong: #cbd5e1; --uj-text: #0f172a; --uj-text-2: #334155; --uj-text-3: #64748b; --uj-text-muted: #94a3b8; --uj-text-inverse: #ffffff; --uj-accent: #1d4ed8; --uj-accent-2: #1e40af; --uj-accent-soft: #dbeafe; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #1e40af; --uj-link-hover: #1e3a8a; --uj-shadow-sm: 0 1px 2px rgba(30,41,90,0.06); --uj-shadow-md: 0 6px 18px rgba(30,41,90,0.10); --uj-shadow-lg: 0 18px 40px rgba(30,41,90,0.14); --uj-ring: rgba(29,78,216,0.30); --uj-gradient-1: linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%); --uj-gradient-2: radial-gradient(circle at 50% 0%,rgba(59,130,246,0.16),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 50%,#60a5fa 100%); --uj-glow: 0 0 20px rgba(29,78,216,0.12); --uj-accent-glow: 0 0 30px rgba(29,78,216,0.20); --uj-surface-glass: rgba(248,250,252,0.75); --uj-chrome: linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%); --uj-chrome-text: #334155; --uj-gradient-3: linear-gradient(135deg,rgba(29,78,216,0.06) 0%,rgba(30,58,138,0.03) 100%); --uj-surface-alt: #ffffff; --uj-border-color: #e2e8f0; --uj-text-primary: #0f172a; --uj-text-secondary: #334155; --uj-accent-hover: #1e40af; } [data-uj-theme="diamond"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- rose-gold — luxury feminine elegance ---------- */ [data-uj-theme="rose-gold"] { --uj-bg: #fdf6f3; --uj-surface: #ffffff; --uj-surface-2: #fefcfb; --uj-surface-3: #f8ebe4; --uj-border: #e8c4b8; --uj-border-strong: #d4a594; --uj-text: #3d1f16; --uj-text-2: #6b3d2e; --uj-text-3: #9a6b5b; --uj-text-muted: #b08a7d; --uj-text-inverse: #fefcfb; --uj-accent: #b76e79; --uj-accent-2: #9a4d5a; --uj-accent-soft: #f9e4e8; --uj-accent-text: #ffffff; --uj-success: #0d9266; --uj-warning: #b45309; --uj-danger: #b91c1c; --uj-info: #0284c7; --uj-link: #9a4d5a; --uj-link-hover: #7a3a45; --uj-shadow-sm: 0 1px 2px rgba(154,77,90,0.06); --uj-shadow-md: 0 6px 18px rgba(154,77,90,0.10); --uj-shadow-lg: 0 18px 40px rgba(154,77,90,0.14); --uj-ring: rgba(183,110,121,0.30); --uj-gradient-1: linear-gradient(135deg,#d48a9a 0%,#b76e79 50%,#9a4d5a 100%); --uj-gradient-2: radial-gradient(circle at 0% 100%,rgba(183,110,121,0.18),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#7a3a45 0%,#b76e79 50%,#d48a9a 100%); --uj-glow: 0 0 20px rgba(183,110,121,0.12); --uj-accent-glow: 0 0 30px rgba(183,110,121,0.20); --uj-surface-glass: rgba(253,246,243,0.75); --uj-chrome: linear-gradient(180deg,#f8ebe4 0%,#e8c4b8 100%); --uj-chrome-text: #6b3d2e; --uj-gradient-3: linear-gradient(135deg,rgba(183,110,121,0.06) 0%,rgba(154,77,90,0.03) 100%); --uj-surface-alt: #fefcfb; --uj-border-color: #e8c4b8; --uj-text-primary: #3d1f16; --uj-text-secondary: #6b3d2e; --uj-accent-hover: #9a4d5a; } [data-uj-theme="rose-gold"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- obsidian-ultra — deep dark gaming / neon cyan ---------- */ [data-uj-theme="obsidian-ultra"] { --uj-bg: #050508; --uj-surface: #0f0f1a; --uj-surface-2: #16162a; --uj-surface-3: #0a0a14; --uj-border: #22222e; --uj-border-strong: #3a3a4a; --uj-text: #f5f5ff; --uj-text-2: #c8c8de; --uj-text-3: #8a8aaa; --uj-text-muted: #606080; --uj-text-inverse: #050508; --uj-accent: #00d4ff; --uj-accent-2: #00a3c4; --uj-accent-soft: #0a1a2e; --uj-accent-text: #050508; --uj-success: #22c55e; --uj-warning: #f59e0b; --uj-danger: #ef4444; --uj-info: #38bdf8; --uj-link: #5ce1e6; --uj-link-hover: #a5f3fc; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.60); --uj-shadow-md: 0 10px 26px rgba(0,212,255,0.12); --uj-shadow-lg: 0 28px 60px rgba(0,212,255,0.18); --uj-ring: rgba(0,212,255,0.55); --uj-gradient-1: linear-gradient(135deg,#00d4ff 0%,#00a3c4 50%,#007a94 100%); --uj-gradient-2: radial-gradient(circle at 100% 100%,rgba(0,212,255,0.30),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#00a3c4 0%,#00d4ff 50%,#5ce1e6 100%); --uj-glow: 0 0 20px rgba(0,212,255,0.20); --uj-accent-glow: 0 0 30px rgba(0,212,255,0.35); --uj-surface-glass: rgba(15,15,26,0.85); --uj-chrome: linear-gradient(180deg,#16162a 0%,#0a0a14 100%); --uj-chrome-text: #c8c8de; --uj-gradient-3: linear-gradient(135deg,rgba(0,212,255,0.10) 0%,rgba(0,163,196,0.05) 100%); --uj-surface-alt: #16162a; --uj-border-color: #22222e; --uj-text-primary: #f5f5ff; --uj-text-secondary: #c8c8de; --uj-accent-hover: #00a3c4; } [data-uj-theme="obsidian-ultra"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- aurora-borealis — northern lights ethereal ---------- */ [data-uj-theme="aurora-borealis"] { --uj-bg: #0a0f1a; --uj-surface: #0f1f2e; --uj-surface-2: #162a3d; --uj-surface-3: #0c1826; --uj-border: #1e3a52; --uj-border-strong: #2e5878; --uj-text: #f0f9ff; --uj-text-2: #bae6fd; --uj-text-3: #7dd3fc; --uj-text-muted: #4aa8d8; --uj-text-inverse: #0a0f1a; --uj-accent: #10b981; --uj-accent-2: #06b6d4; --uj-accent-soft: #0a2e2e; --uj-accent-text: #ffffff; --uj-success: #34d399; --uj-warning: #fbbf24; --uj-danger: #fb7185; --uj-info: #38bdf8; --uj-link: #67e8f9; --uj-link-hover: #a5f3fc; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.50); --uj-shadow-md: 0 10px 26px rgba(16,185,129,0.12); --uj-shadow-lg: 0 28px 60px rgba(139,92,246,0.15); --uj-ring: rgba(16,185,129,0.45); --uj-gradient-1: linear-gradient(135deg,#10b981 0%,#06b6d4 33%,#8b5cf6 100%); --uj-gradient-2: radial-gradient(circle at 0% 0%,rgba(16,185,129,0.22),transparent 55%),radial-gradient(circle at 100% 100%,rgba(139,92,246,0.22),transparent 55%); --uj-text-gradient: linear-gradient(135deg,#10b981 0%,#06b6d4 33%,#8b5cf6 66%,#c4b5fd 100%); --uj-glow: 0 0 20px rgba(16,185,129,0.18); --uj-accent-glow: 0 0 30px rgba(139,92,246,0.25); --uj-surface-glass: rgba(15,31,46,0.80); --uj-chrome: linear-gradient(180deg,#162a3d 0%,#0c1826 100%); --uj-chrome-text: #bae6fd; --uj-gradient-3: linear-gradient(135deg,rgba(16,185,129,0.08) 0%,rgba(139,92,246,0.08) 100%); --uj-surface-alt: #162a3d; --uj-border-color: #1e3a52; --uj-text-primary: #f0f9ff; --uj-text-secondary: #bae6fd; --uj-accent-hover: #06b6d4; } [data-uj-theme="aurora-borealis"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- midnight-sapphire — deep navy luxury / gold accent ---------- */ [data-uj-theme="midnight-sapphire"] { --uj-bg: #020617; --uj-surface: #0f172a; --uj-surface-2: #1e293b; --uj-surface-3: #0b1122; --uj-border: #1e293b; --uj-border-strong: #334155; --uj-text: #f8fafc; --uj-text-2: #cbd5e1; --uj-text-3: #94a3b8; --uj-text-muted: #64748b; --uj-text-inverse: #020617; --uj-accent: #c9a227; --uj-accent-2: #7c3aed; --uj-accent-soft: #1e1a0a; --uj-accent-text: #020617; --uj-success: #22c55e; --uj-warning: #f59e0b; --uj-danger: #ef4444; --uj-info: #38bdf8; --uj-link: #e8c970; --uj-link-hover: #fde68a; --uj-shadow-sm: 0 1px 2px rgba(0,0,0,0.55); --uj-shadow-md: 0 10px 26px rgba(201,162,39,0.12); --uj-shadow-lg: 0 28px 60px rgba(201,162,39,0.18); --uj-ring: rgba(201,162,39,0.50); --uj-gradient-1: linear-gradient(135deg,#c9a227 0%,#7c3aed 100%); --uj-gradient-2: radial-gradient(circle at 50% 0%,rgba(201,162,39,0.20),transparent 60%); --uj-text-gradient: linear-gradient(135deg,#fde68a 0%,#c9a227 50%,#7c3aed 100%); --uj-glow: 0 0 20px rgba(201,162,39,0.18); --uj-accent-glow: 0 0 30px rgba(201,162,39,0.30); --uj-surface-glass: rgba(15,23,42,0.85); --uj-chrome: linear-gradient(180deg,#1e293b 0%,#0b1122 100%); --uj-chrome-text: #cbd5e1; --uj-gradient-3: linear-gradient(135deg,rgba(201,162,39,0.08) 0%,rgba(124,58,237,0.05) 100%); --uj-surface-alt: #1e293b; --uj-border-color: #1e293b; --uj-text-primary: #f8fafc; --uj-text-secondary: #cbd5e1; --uj-accent-hover: #7c3aed; } [data-uj-theme="midnight-sapphire"] .uj-text-gradient { background-image: var(--uj-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ */ /* COLOR-SCHEME HINTS (applied to :root for native controls) */ /* ============================================================ */ :root { color-scheme: light; } /* default = light, prevents OS dark-mode bleed */ body.ujeff-admin { color-scheme: light; } /* admin panel defaults to light */ [data-uj-theme="midnight"] { color-scheme: dark; } [data-uj-theme="slate"] { color-scheme: dark; } [data-uj-theme="obsidian"] { color-scheme: dark; } [data-uj-theme="royal"] { color-scheme: dark; } [data-uj-theme="nebula"] { color-scheme: dark; } [data-uj-theme="onyx"] { color-scheme: dark; } [data-uj-theme="carbon"] { color-scheme: dark; } [data-uj-theme="abyss"] { color-scheme: dark; } [data-uj-theme="cosmos"] { color-scheme: dark; } [data-uj-theme="vault"] { color-scheme: dark; } [data-uj-theme="crimson"] { color-scheme: light; } [data-uj-theme="indigo"] { color-scheme: light; } [data-uj-theme="emerald"] { color-scheme: light; } [data-uj-theme="rose"] { color-scheme: light; } [data-uj-theme="amber"] { color-scheme: light; } [data-uj-theme="pearl"] { color-scheme: light; } [data-uj-theme="frost"] { color-scheme: light; } [data-uj-theme="kenaith"] { color-scheme: light; } [data-uj-theme="linen"] { color-scheme: light; } [data-uj-theme="snow"] { color-scheme: light; } [data-uj-theme="ivory"] { color-scheme: light; } [data-uj-theme="porcelain"] { color-scheme: light; } [data-uj-theme="mist"] { color-scheme: light; } [data-uj-theme="platinum"] { color-scheme: light; } [data-uj-theme="sunset"] { color-scheme: light; } [data-uj-theme="jade"] { color-scheme: light; } [data-uj-theme="champagne"] { color-scheme: light; } [data-uj-theme="arctic"] { color-scheme: light; } [data-uj-theme="sapphire"] { color-scheme: light; } [data-uj-theme="copper"] { color-scheme: light; } [data-uj-theme="forest"] { color-scheme: light; } [data-uj-theme="mightytheme"] { color-scheme: light; } [data-uj-theme="diamond"] { color-scheme: light; } [data-uj-theme="rose-gold"] { color-scheme: light; } [data-uj-theme="obsidian-ultra"] { color-scheme: dark; } [data-uj-theme="aurora-borealis"] { color-scheme: dark; } [data-uj-theme="midnight-sapphire"] { color-scheme: dark; } /* ============================================================ */ /* FORM CONTROL TOKENS — per color-scheme */ /* Light themes: slightly tinted bg so inputs stand out on cards */ /* Dark themes: slightly lighter bg than surface for contrast */ /* ============================================================ */ /* Light theme inputs — off-white / tinted background */ [data-uj-theme="crimson"] { --uj-input-bg: #fef2f2; --uj-input-border-color: #e5bfbf; } [data-uj-theme="indigo"] { --uj-input-bg: #eef2ff; --uj-input-border-color: #c7d2e8; } [data-uj-theme="emerald"] { --uj-input-bg: #ecfdf5; --uj-input-border-color: #a7d7c0; } [data-uj-theme="rose"] { --uj-input-bg: #fff1f2; --uj-input-border-color: #e8b8c2; } [data-uj-theme="amber"] { --uj-input-bg: #fffbeb; --uj-input-border-color: #e0cdb0; } [data-uj-theme="pearl"] { --uj-input-bg: #f9fafb; --uj-input-border-color: #d1d5db; } [data-uj-theme="frost"] { --uj-input-bg: #f0f9ff; --uj-input-border-color: #badbe9; } [data-uj-theme="kenaith"] { --uj-input-bg: #f5f3ff; --uj-input-border-color: #c4b5fd; } [data-uj-theme="linen"] { --uj-input-bg: #fdf8f0; --uj-input-border-color: #d4c5a0; } [data-uj-theme="snow"] { --uj-input-bg: #faf5ff; --uj-input-border-color: #d8b4fe; } [data-uj-theme="ivory"] { --uj-input-bg: #ecfdf5; --uj-input-border-color: #a7f3d0; } [data-uj-theme="porcelain"] { --uj-input-bg: #fdf2f8; --uj-input-border-color: #f9a8d4; } [data-uj-theme="mist"] { --uj-input-bg: #f8fafc; --uj-input-border-color: #cbd5e1; } [data-uj-theme="platinum"] { --uj-input-bg: #f3f4f6; --uj-input-border-color: #d1d5db; } [data-uj-theme="sunset"] { --uj-input-bg: #fff7ed; --uj-input-border-color: #fed7aa; } [data-uj-theme="jade"] { --uj-input-bg: #ecfdf5; --uj-input-border-color: #6ee7b7; } [data-uj-theme="champagne"] { --uj-input-bg: #fffbeb; --uj-input-border-color: #d4a843; } [data-uj-theme="arctic"] { --uj-input-bg: #ecfeff; --uj-input-border-color: #a5f3fc; } [data-uj-theme="sapphire"] { --uj-input-bg: #eff6ff; --uj-input-border-color: #bfdbfe; } [data-uj-theme="copper"] { --uj-input-bg: #fef3e8; --uj-input-border-color: #d4956b; } [data-uj-theme="forest"] { --uj-input-bg: #f0fdf4; --uj-input-border-color: #86efac; } [data-uj-theme="mightytheme"] { --uj-input-bg: #f0f9ff; --uj-input-border-color: #b8ccdb; } [data-uj-theme="diamond"] { --uj-input-bg: #f8fafc; --uj-input-border-color: #cbd5e1; } [data-uj-theme="rose-gold"] { --uj-input-bg: #fdf6f3; --uj-input-border-color: #e8c4b8; } [data-uj-theme="obsidian-ultra"] { --uj-input-bg: #13131a; --uj-input-border-color: #2a2a3a; } [data-uj-theme="aurora-borealis"] { --uj-input-bg: #0f1f2e; --uj-input-border-color: #1e3a52; } [data-uj-theme="midnight-sapphire"] { --uj-input-bg: #0f172a; --uj-input-border-color: #1e293b; } /* Dark theme inputs — slightly lighter than surface so they're visible */ [data-uj-theme="midnight"] { --uj-input-bg: #1a2342; --uj-input-border-color: #3a4775; } [data-uj-theme="slate"] { --uj-input-bg: #263348; --uj-input-border-color: #475569; } [data-uj-theme="obsidian"] { --uj-input-bg: #1f1f1f; --uj-input-border-color: #3a3a3a; } [data-uj-theme="royal"] { --uj-input-bg: #2d1f50; --uj-input-border-color: #5b3f8a; } [data-uj-theme="nebula"] { --uj-input-bg: #232050; --uj-input-border-color: #4a4580; } [data-uj-theme="onyx"] { --uj-input-bg: #1c1c1e; --uj-input-border-color: #3a3a3c; } [data-uj-theme="carbon"] { --uj-input-bg: #1a1a1a; --uj-input-border-color: #3a3a3a; } [data-uj-theme="abyss"] { --uj-input-bg: #0f1a30; --uj-input-border-color: #1e3a5f; } [data-uj-theme="cosmos"] { --uj-input-bg: #1e1030; --uj-input-border-color: #3d2058; } [data-uj-theme="vault"] { --uj-input-bg: #0e1a14; --uj-input-border-color: #1e3525; } /* ============================================================ */ /* LEGACY VAR-NAME ALIAS BRIDGE */ /* ============================================================ */ body.ujeff-admin { --uj-primary: var(--uj-accent); --uj-primary-deep: var(--uj-accent-2); --uj-primary-soft: var(--uj-accent-soft); --uj-primary-line: var(--uj-accent-soft); --uj-primary-text: var(--uj-accent-text); --uj-accent-solid: var(--uj-accent); --uj-secondary: var(--uj-accent-2); --uj-surface-elevated: var(--uj-surface-2); --uj-text-subtle: var(--uj-text-3); --uj-divider: var(--uj-border); --uj-success-soft: color-mix(in srgb, var(--uj-success) 12%, transparent); --uj-warning-soft: color-mix(in srgb, var(--uj-warning) 14%, transparent); --uj-danger-soft: color-mix(in srgb, var(--uj-danger) 12%, transparent); --uj-info-soft: color-mix(in srgb, var(--uj-info) 12%, transparent); --uj-shadow-xs: 0 1px 2px rgba(15,23,42,0.04); --uj-shadow-brand: 0 8px 22px -8px color-mix(in srgb, var(--uj-accent) 60%, transparent); --uj-density-y: 1rem; --uj-density-x: 1.25rem; --uj-radius-sm: 8px; --uj-radius: 12px; --uj-radius-md: 12px; --uj-radius-lg: 16px; --uj-sidebar-bg: var(--uj-surface-2); --uj-sidebar-text: var(--uj-text-3); --uj-sidebar-text-h: var(--uj-text); --uj-sidebar-hover: var(--uj-accent-soft); --uj-sidebar-border: var(--uj-border); } body.ujeff-admin[data-uj-density="compact"] { --uj-density-y: 0.65rem; --uj-density-x: 0.9rem; } /* ============================================================ */ /* SEMANTIC OVERRIDES — DARK THEMES */ /* ============================================================ */ [data-uj-theme="midnight"], [data-uj-theme="slate"], [data-uj-theme="obsidian"], [data-uj-theme="royal"], [data-uj-theme="nebula"], [data-uj-theme="onyx"], [data-uj-theme="carbon"], [data-uj-theme="abyss"], [data-uj-theme="cosmos"], [data-uj-theme="vault"], [data-uj-theme="obsidian-ultra"], [data-uj-theme="aurora-borealis"], [data-uj-theme="midnight-sapphire"] { --uj-success: #22c55e; --uj-success-soft: color-mix(in srgb, #22c55e 18%, transparent); --uj-success-text: #ffffff; --uj-danger: #f87171; --uj-danger-soft: color-mix(in srgb, #f87171 18%, transparent); --uj-danger-text: #ffffff; --uj-warning: #fbbf24; --uj-warning-soft: color-mix(in srgb, #fbbf24 18%, transparent); --uj-warning-text: #ffffff; --uj-info: #22d3ee; --uj-info-soft: color-mix(in srgb, #22d3ee 18%, transparent); --uj-info-text: #06141a; } /* ============================================================ */ /* SEMANTIC OVERRIDES — KENAITH */ /* ============================================================ */ [data-uj-theme="kenaith"] { --uj-success: #198754; --uj-success-soft: #d1e7dd; --uj-success-text: #ffffff; --uj-danger: #dc3545; --uj-danger-soft: #f8d7da; --uj-danger-text: #ffffff; --uj-warning: #ffc107; --uj-warning-soft: #fff3cd; --uj-warning-text: #000000; --uj-info: #0dcaf0; --uj-info-soft: #cff4fc; --uj-info-text: #000000; }