/* ═══════════════════════════════════════════════════════════════════════════ 🌿 KOLOPLUS TOKENS v4.0 — Warm Earth Edition Single source of truth for ALL --k-* variables. Loaded BEFORE theme-v2 + all other CSS. Google Fonts (add to ): ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Typography ── */ --k-font-display: 'Unbounded', 'DM Sans', sans-serif; --k-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --k-font-mono: 'JetBrains Mono', 'Fira Code', monospace; --k-text-xs: 0.75rem; --k-text-sm: 0.875rem; --k-text-base: 1rem; --k-text-lg: 1.125rem; --k-text-xl: 1.25rem; --k-text-2xl: 1.5rem; --k-text-3xl: 1.875rem; --k-text-4xl: 2.25rem; --k-text-5xl: 3rem; --k-leading-tight: 1.25; --k-leading-normal: 1.5; --k-leading-relaxed: 1.625; --k-weight-normal: 400; --k-weight-medium: 500; --k-weight-semibold: 600; --k-weight-bold: 700; --k-weight-extrabold: 800; --k-weight-black: 900; /* ── Radii ── */ --k-radius-xs: 0.25rem; --k-radius-sm: 0.5rem; --k-radius-md: 0.625rem; --k-radius-lg: 0.75rem; --k-radius-xl: 1rem; --k-radius-2xl: 1.25rem; --k-radius-3xl: 2rem; --k-radius-full: 9999px; /* ── Spacing ── */ --k-space-1: 0.25rem; --k-space-2: 0.5rem; --k-space-3: 0.75rem; --k-space-4: 1rem; --k-space-5: 1.25rem; --k-space-6: 1.5rem; --k-space-8: 2rem; --k-space-10: 2.5rem; --k-space-12: 3rem; --k-space-16: 4rem; --k-space-20: 5rem; /* ── Motion ── */ --k-ease: cubic-bezier(0.4, 0, 0.2, 1); --k-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --k-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --k-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --k-duration-fast: 150ms; --k-duration-normal: 250ms; --k-duration-slow: 400ms; /* ── Z-index ── */ --k-z-base: 0; --k-z-dropdown: 100; --k-z-sticky: 200; --k-z-fixed: 300; --k-z-modal-backdrop: 400; --k-z-modal: 500; --k-z-tooltip: 700; --k-z-toast: 800; --k-z-top: 999; /* ── Layout ── */ --k-container-sm: 640px; --k-container-md: 768px; --k-container-lg: 1024px; --k-container-xl: 1280px; --k-container-2xl: 1440px; --k-header-height: 60px; --k-header-h: 60px; --k-sidebar-width: 280px; --k-sidebar-w-sm: 64px; /* ── Warm Earth Palette (raw colors) ── */ --k-yellow: #c4a97a; --k-yellow-light: #d4b98a; --k-yellow-dark: #a08550; --k-yellow-500: #c4a97a; --k-yellow-glow: rgba(196, 169, 122, 0.25); --k-yellow-soft: rgba(196, 169, 122, 0.12); --k-cyan: #7a9ab0; --k-cyan-light: #8aaabf; --k-cyan-dark: #5080a0; --k-cyan-glow: rgba(122, 154, 176, 0.25); --k-green: #7d9a78; --k-green-light: #8daa88; --k-green-dark: #5e8058; --k-green-glow: rgba(125, 154, 120, 0.25); --k-green-soft: rgba(125, 154, 120, 0.12); --k-red: #b06b5a; --k-red-light: #c07b6a; --k-red-dark: #a05a48; --k-red-600: #a05a48; --k-red-700: #904a38; --k-red-glow: rgba(176, 107, 90, 0.25); --k-red-soft: rgba(176, 107, 90, 0.12); --k-blue: #5080a0; --k-blue-light: #6090b0; --k-blue-200: #8aaabf; --k-blue-glow: rgba(80, 128, 160, 0.25); --k-blue-soft: rgba(80, 128, 160, 0.12); --k-purple: #8a7098; --k-purple-light: #9a80a8; --k-purple-glow: rgba(138, 112, 152, 0.25); --k-pink: #b0707a; --k-pink-light: #c0808a; --k-pink-glow: rgba(176, 112, 122, 0.25); --k-orange: #c87a52; --k-orange-dark: #b06d47; --k-orange-700: #a06040; --k-white: #f5ece3; --k-slate-900: #1a1714; --k-slate-800: #241f1b; --k-slate-600: #5c5047; --k-slate-500: #6b5f53; --k-slate-400: #8a7d70; --k-slate-100: #f2ebe3; --k-slate-50: #faf6f1; --k-amber-500: #c4a97a; --k-amber-600: #a08550; --k-violet-300: #9a80a8; --k-violet-600: #7a6088; --k-violet-700: #6a5078; --k-indigo-300: #8a9abc; --k-emerald-200: #8daa88; /* Auth palette (warm tones — Warm Earth) */ --k-auth-light-1: #faf6f1; --k-auth-light-2: #f2ebe3; --k-auth-light-3: #e8dfd5; --k-auth-light-4: #f5ece3; --k-auth-light-5: #fdfaf7; --k-auth-ink: #1a1714; /* ── Legacy KP aliases (mapped to warm palette) ── */ --k-kp-blue: #5080a0; --k-kp-rose: #b06b5a; --k-kp-magenta: #a05a48; --k-kp-pink: #b0707a; --k-kp-hotred: #a05a48; --k-kp-salmon: #c09080; --k-kp-lavender: #b0a0b8; --k-kp-coral: #b06b5a; --k-kp-amber: #c4a97a; --k-kp-night: #241f1b; --k-kp-ink: #1a1714; --k-kp-sky: #7a9ab0; --k-kp-sky-strong: #5080a0; --k-kp-deep: #1a1714; --k-kp-neon-cyan: #7a9ab0; --k-yellow-500: #c4a97a; --k-gray-400: #8a7d70; --k-violet-300: #9a80a8; /* ── Semantic Aliases ── */ --k-success: var(--k-green); --k-danger: var(--k-red); --k-warning: var(--k-yellow); --k-info: var(--k-cyan); /* ── Tier Colors ── */ --tier-wood: #8B6914; --tier-bronze: #CD7F32; --tier-silver: #C0C0C0; --tier-gold: #d4b98a; --tier-platinum: #E5E4E2; --tier-diamond: #8aaabf; --tier-legendary: #c87a52; --tier-wood-soft: rgba(139, 105, 20, 0.12); --tier-bronze-soft: rgba(205, 127, 50, 0.12); --tier-silver-soft: rgba(192, 192, 192, 0.12); --tier-gold-soft: rgba(212, 185, 138, 0.12); --tier-platinum-soft: rgba(229, 228, 226, 0.12); --tier-diamond-soft: rgba(138, 170, 191, 0.12); --tier-legendary-soft: rgba(200, 122, 82, 0.12); /* ── Game Stats ── */ --k-stat-strength: #b06b5a; --k-stat-defense: #5080a0; --k-stat-agility: var(--k-yellow); --k-stat-health: var(--k-green); --k-stat-mastery: #8a7098; --k-stat-endurance: #c87a52; } /* ═══════════════════════════════════════════════════════════════════════════ 🌙 DARK THEME (default) ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { --k-bg-dark: #0f1626; --k-bg-darker: #0b1220; --k-bg-primary: #0f1626; --k-bg-card: #141d31; --k-bg-elevated: #19243b; --k-bg-hover: #22304d; --k-bg-active: #2a3b5d; --k-bg-sunken: #0b1220; --k-bg-input: #10182a; --k-text: #edf3ff; --k-text-primary: #edf3ff; --k-text-secondary: #aebbd3; --k-text-muted: #7483a2; --k-text-inverse: #0f1626; --k-border: rgba(162, 185, 230, 0.14); --k-border-subtle: rgba(162, 185, 230, 0.08); --k-border-default: rgba(162, 185, 230, 0.14); --k-border-strong: rgba(162, 185, 230, 0.20); --k-border-accent: rgba(102, 141, 210, 0.26); --k-accent-border: rgba(102, 141, 210, 0.26); --k-primary: #6a8bd7; --k-primary-light: #89a7ef; --k-primary-soft: rgba(106, 139, 215, 0.14); --k-primary-glow: rgba(106, 139, 215, 0.18); --k-secondary: #55c0cf; --k-secondary-light: #78d5e3; --k-secondary-soft: rgba(85, 192, 207, 0.14); --k-secondary-glow: rgba(85, 192, 207, 0.18); --k-chip-bg: rgba(106, 139, 215, 0.12); /* Glass */ --k-glass-bg: rgba(20, 29, 49, 0.72); --k-glass-bg-light: rgba(20, 29, 49, 0.46); --k-glass-bg-strong: rgba(20, 29, 49, 0.88); --k-glass-border: rgba(162, 185, 230, 0.10); --k-glass-blur: 24px; /* Gradients */ --k-gradient-card: linear-gradient(135deg, #18243a 0%, #131c2f 100%); --k-gradient-dark: linear-gradient(135deg, #0d1525 0%, #121b2d 100%); --k-gradient-primary: linear-gradient(135deg, #6a8bd7 0%, #5d76d3 100%); --k-gradient-secondary: linear-gradient(135deg, #55c0cf 0%, #4ba2bf 100%); --k-gradient-rainbow: linear-gradient(45deg, #6a8bd7, #7d8eff, #55c0cf, #76d9b7); /* Shadows */ --k-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); --k-shadow-md: 0 4px 12px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.08); --k-shadow-lg: 0 12px 32px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1); --k-shadow-xl: 0 20px 48px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.12); --k-shadow-2xl: 0 32px 64px rgba(0,0,0,0.3); --k-shadow-glow: 0 0 18px rgba(106, 139, 215, 0.14); --k-shadow-glow-sm: 0 0 10px rgba(106, 139, 215, 0.10); /* Warning surfaces */ --k-warn-surface: rgba(214, 179, 97, 0.10); --k-warn-border: rgba(214, 179, 97, 0.24); --k-modal-backdrop: rgba(6, 10, 20, 0.72); } /* ═══════════════════════════════════════════════════════════════════════════ ☀️ LIGHT THEME ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --k-bg-dark: #faf6f1; --k-bg-darker: #f2ebe3; --k-bg-primary: #faf6f1; --k-bg-card: #ffffff; --k-bg-elevated: #ffffff; --k-bg-hover: #f5f0ea; --k-bg-active: #ebe4da; --k-bg-sunken: #e8dfd5; --k-bg-input: #ffffff; --k-text: #2c2420; --k-text-primary: #2c2420; --k-text-secondary: #5c5047; --k-text-muted: #7483a2; --k-text-inverse: #f5ece3; --k-border: rgba(80, 60, 40, 0.1); --k-border-subtle: rgba(80, 60, 40, 0.06); --k-border-default: rgba(80, 60, 40, 0.1); --k-border-strong: rgba(80, 60, 40, 0.18); --k-border-accent: rgba(176, 104, 64, 0.3); --k-accent-border: rgba(176, 104, 64, 0.3); --k-primary: #b06840; --k-primary-light: #9a5a35; --k-primary-soft: rgba(176, 104, 64, 0.08); --k-primary-glow: rgba(176, 104, 64, 0.15); --k-secondary: #5e8058; --k-secondary-light: #4e7048; --k-secondary-soft: rgba(94, 128, 88, 0.08); --k-secondary-glow: rgba(94, 128, 88, 0.15); --k-chip-bg: rgba(176, 104, 64, 0.08); /* Glass */ --k-glass-bg: rgba(255, 255, 255, 0.7); --k-glass-bg-light: rgba(255, 255, 255, 0.5); --k-glass-bg-strong: rgba(255, 255, 255, 0.9); --k-glass-border: rgba(80, 60, 40, 0.08); --k-glass-blur: 24px; /* Gradients */ --k-gradient-card: linear-gradient(135deg, #ffffff 0%, #fdfaf7 100%); --k-gradient-dark: linear-gradient(135deg, #faf6f1 0%, #f2ebe3 100%); --k-gradient-primary: linear-gradient(135deg, #b06840 0%, #a05a48 100%); --k-gradient-secondary: linear-gradient(135deg, #5e8058 0%, #4e7048 100%); --k-gradient-rainbow: linear-gradient(45deg, #b06840, #a08550, #5e8058, #5080a0); /* Shadows */ --k-shadow-sm: 0 1px 3px rgba(80,60,40,0.05), 0 1px 2px rgba(80,60,40,0.03); --k-shadow-md: 0 4px 12px rgba(80,60,40,0.07), 0 2px 4px rgba(80,60,40,0.04); --k-shadow-lg: 0 12px 32px rgba(80,60,40,0.1), 0 4px 8px rgba(80,60,40,0.05); --k-shadow-xl: 0 20px 48px rgba(80,60,40,0.12), 0 8px 16px rgba(80,60,40,0.06); --k-shadow-2xl: 0 32px 64px rgba(80,60,40,0.15); --k-shadow-glow: 0 0 20px rgba(176, 104, 64, 0.1); --k-shadow-glow-sm: 0 0 10px rgba(176, 104, 64, 0.06); /* Warning surfaces */ --k-warn-surface: rgba(160, 133, 80, 0.06); --k-warn-border: rgba(160, 133, 80, 0.15); --k-modal-backdrop: rgba(40, 35, 30, 0.4); /* Override palette colors for better light-theme contrast */ --k-green: #5e8058; --k-green-light: #6e9068; --k-red: #a05a48; --k-red-light: #b06a58; --k-yellow: #a08550; --k-yellow-light: #b09560; --k-orange: #b06840; --k-blue: #5080a0; --k-cyan: #5080a0; --k-purple: #7a6088; --k-kp-blue: #5080a0; --k-kp-rose: #a05a48; --k-kp-coral: #a05a48; --k-kp-amber: #a08550; } /* ═══════════════════════════════════════════════════════════════════════════ 🌾 WARM EARTH SEMANTIC LAYER Shared semantic aliases for modules migrating from legacy styles — Warm Earth. ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { --k-surface-0: var(--k-bg-primary); --k-surface-1: var(--k-bg-card); --k-surface-2: var(--k-bg-elevated); --k-surface-3: var(--k-bg-hover); --k-panel: rgba(46, 40, 34, 0.88); --k-panel-strong: rgba(51, 44, 39, 0.96); --k-overlay-soft: rgba(20, 17, 15, 0.76); --k-hero-glow: radial-gradient(circle at top, rgba(106, 139, 215, 0.10), transparent 42%); --k-page-gradient: linear-gradient(180deg, #0b1220 0%, #10192b 48%, #0b1220 100%); --k-ring-focus: 0 0 0 3px rgba(200, 122, 82, 0.16); --k-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18); --k-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 235, 210, 0.04) inset; --k-shadow-floating: 0 20px 50px rgba(0, 0, 0, 0.26); --k-divider-strong: rgba(255, 235, 210, 0.12); --k-accent-sage: var(--k-green); --k-accent-sand: var(--k-yellow); --k-accent-clay: var(--k-red); --k-accent-sky: var(--k-cyan); } [data-theme="light"] { --k-surface-0: var(--k-bg-primary); --k-surface-1: var(--k-bg-card); --k-surface-2: var(--k-bg-elevated); --k-surface-3: var(--k-bg-hover); --k-panel: rgba(255, 255, 255, 0.92); --k-panel-strong: rgba(253, 250, 247, 0.98); --k-overlay-soft: rgba(44, 36, 32, 0.16); --k-hero-glow: radial-gradient(circle at top, rgba(176, 104, 64, 0.08), transparent 42%); --k-page-gradient: linear-gradient(180deg, #faf6f1 0%, #f5eee7 54%, #efe5db 100%); --k-ring-focus: 0 0 0 3px rgba(176, 104, 64, 0.12); --k-shadow-soft: 0 10px 30px rgba(80, 60, 40, 0.08); --k-shadow-card: 0 16px 36px rgba(80, 60, 40, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset; --k-shadow-floating: 0 24px 56px rgba(80, 60, 40, 0.12); --k-divider-strong: rgba(80, 60, 40, 0.14); --k-accent-sage: var(--k-green); --k-accent-sand: var(--k-yellow-dark); --k-accent-clay: var(--k-red-dark); --k-accent-sky: var(--k-blue); } /* ═══════════════════════════════════════════════════════════════════════════ 🎮 KOLOPLUS GAMING REFRESH v5.0 Youthful / arcade-inspired override layer. Keeps semantic tokens but shifts the mood to a brighter, modern game UI. ═══════════════════════════════════════════════════════════════════════════ */ :root { --k-font-display: 'Unbounded', 'DM Sans', sans-serif; --k-radius-lg: 0.9rem; --k-radius-xl: 1.2rem; --k-radius-2xl: 1.6rem; --k-radius-3xl: 2rem; --k-grid-line: rgba(255,255,255,.04); --k-grid-line-strong: rgba(255,255,255,.08); --k-accent-electric: #7480c4; --k-accent-arcade: #6aaec4; --k-accent-spark: #c08bbf; --k-accent-lime: #84c79d; --k-gradient-gaming: linear-gradient(135deg, #7480c4 0%, #6aaac1 56%, #83b991 100%); --k-gradient-sunset: linear-gradient(135deg, #c6a06a 0%, #b995c8 100%); } :root, [data-theme="dark"] { --k-bg-primary: #101522; --k-bg-card: #171d2c; --k-bg-elevated: #1e2537; --k-bg-hover: #242c40; --k-bg-active: #2b3450; --k-bg-sunken: #0d111b; --k-bg-input: #141a29; --k-text: #eef2ff; --k-text-primary: #eef2ff; --k-text-secondary: #bcc6e0; --k-text-muted: #8c96b2; --k-text-inverse: #0c1020; --k-border: rgba(118, 134, 173, 0.16); --k-border-subtle: rgba(118, 134, 173, 0.10); --k-border-default: rgba(118, 134, 173, 0.16); --k-border-strong: rgba(118, 134, 173, 0.24); --k-border-accent: rgba(123, 132, 216, 0.28); --k-accent-border: rgba(123, 132, 216, 0.28); --k-primary: #6670b5; --k-primary-light: #808ad0; --k-primary-soft: rgba(102, 112, 181, 0.08); --k-primary-glow: rgba(102, 112, 181, 0.10); --k-secondary: #5c96ad; --k-secondary-light: #6ea8bf; --k-secondary-soft: rgba(92, 150, 173, 0.08); --k-secondary-glow: rgba(92, 150, 173, 0.09); --k-success: #73b48f; --k-danger: #c97890; --k-warning: #c8a266; --k-info: #63b2ce; --k-chip-bg: rgba(102, 112, 181, 0.06); --k-glass-bg: rgba(22, 28, 42, 0.76); --k-glass-bg-light: rgba(22, 28, 42, 0.50); --k-glass-bg-strong: rgba(18, 23, 36, 0.90); --k-glass-border: rgba(118, 130, 166, 0.12); --k-gradient-card: linear-gradient(180deg, rgba(29,36,54,.98), rgba(19,24,38,.98)); --k-gradient-dark: linear-gradient(180deg, #111626 0%, #171d30 46%, #0e121d 100%); --k-gradient-primary: linear-gradient(135deg, #6670b5 0%, #5c96ad 100%); --k-gradient-secondary: linear-gradient(135deg, #5c96ad 0%, #74aa8d 100%); --k-gradient-rainbow: linear-gradient(90deg, #6670b5 0%, #5c96ad 38%, #74aa8d 76%, #b08fc0 100%); --k-shadow-sm: 0 8px 18px rgba(4, 8, 22, 0.34); --k-shadow-md: 0 12px 28px rgba(4, 8, 22, 0.42); --k-shadow-lg: 0 20px 46px rgba(4, 8, 22, 0.5); --k-shadow-xl: 0 28px 72px rgba(4, 8, 22, 0.6); --k-shadow-2xl: 0 36px 90px rgba(4, 8, 22, 0.68); --k-shadow-glow: 0 0 0 1px rgba(102, 112, 181, 0.08), 0 0 10px rgba(92, 150, 173, 0.04); --k-shadow-glow-sm: 0 0 0 1px rgba(102, 112, 181, 0.06), 0 0 6px rgba(92, 150, 173, 0.03); --k-panel: rgba(20, 26, 39, 0.92); --k-panel-strong: rgba(16, 21, 32, 0.985); --k-overlay-soft: rgba(12, 16, 24, 0.72); --k-hero-glow: radial-gradient(circle at top, rgba(102, 112, 181, 0.07), transparent 44%), radial-gradient(circle at 82% 18%, rgba(92, 150, 173, 0.05), transparent 32%), radial-gradient(circle at 18% 88%, rgba(176, 143, 192, 0.04), transparent 30%); --k-page-gradient: linear-gradient(180deg, #101420 0%, #141a28 42%, #0c1018 100%); --k-ring-focus: 0 0 0 3px rgba(92, 150, 173, 0.09); --k-shadow-soft: 0 12px 26px rgba(4, 8, 22, 0.20); --k-shadow-card: 0 16px 30px rgba(4, 8, 22, 0.24), 0 1px 0 rgba(255,255,255,.02) inset; --k-shadow-floating: 0 20px 42px rgba(4, 8, 22, 0.28); --k-divider-strong: rgba(125, 140, 183, 0.18); --k-accent-sage: var(--k-accent-lime); --k-accent-sand: #d8ad68; --k-accent-clay: #d97a98; --k-accent-sky: #63b2ce; --k-grid-line: rgba(102, 112, 181, 0.02); --k-grid-line-strong: rgba(102, 112, 181, 0.035); --k-grid-opacity: .10; } [data-theme="light"] { --k-bg-primary: #f7f8fc; --k-bg-card: rgba(255, 255, 255, 0.94); --k-bg-elevated: rgba(255, 255, 255, 0.985); --k-bg-hover: #f0f3fb; --k-bg-active: #e7ecf8; --k-bg-sunken: #dfe6f4; --k-bg-input: rgba(255,255,255,.97); --k-text: #1d2642; --k-text-primary: #1d2642; --k-text-secondary: #53607e; --k-text-muted: #7f8aa6; --k-text-inverse: #f7f9ff; --k-border: rgba(93, 108, 151, 0.14); --k-border-subtle: rgba(93, 108, 151, 0.08); --k-border-default: rgba(93, 108, 151, 0.14); --k-border-strong: rgba(93, 108, 151, 0.22); --k-border-accent: rgba(108, 115, 210, 0.22); --k-accent-border: rgba(108, 115, 210, 0.22); --k-primary: #7077c9; --k-primary-light: #8b92dc; --k-primary-soft: rgba(112, 119, 201, 0.08); --k-primary-glow: rgba(112, 119, 201, 0.10); --k-secondary: #68abc2; --k-secondary-light: #81bcd0; --k-secondary-soft: rgba(104, 171, 194, 0.08); --k-secondary-glow: rgba(104, 171, 194, 0.10); --k-success: #45b87d; --k-danger: #e56c86; --k-warning: #e6a84a; --k-info: #5aa8c8; --k-chip-bg: rgba(112, 119, 201, 0.055); --k-glass-bg: rgba(255, 255, 255, 0.76); --k-glass-bg-light: rgba(255, 255, 255, 0.58); --k-glass-bg-strong: rgba(255, 255, 255, 0.92); --k-glass-border: rgba(93, 108, 151, 0.08); --k-gradient-card: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,252,.97)); --k-gradient-dark: linear-gradient(180deg, #fafbfe 0%, #f2f5fb 52%, #ebeff8 100%); --k-gradient-primary: linear-gradient(135deg, #8084d2 0%, #70b0c5 100%); --k-gradient-secondary: linear-gradient(135deg, #70b0c5 0%, #88c29e 100%); --k-gradient-rainbow: linear-gradient(90deg, #8084d2 0%, #70b0c5 42%, #88c29e 76%, #c4a6d7 100%); --k-gradient-gaming: linear-gradient(135deg, #8084d2 0%, #70b0c5 58%, #88c29e 100%); --k-gradient-sunset: linear-gradient(135deg, #e5b173 0%, #cf9dbf 100%); --k-shadow-sm: 0 8px 18px rgba(88, 102, 143, 0.06); --k-shadow-md: 0 14px 30px rgba(88, 102, 143, 0.10); --k-shadow-lg: 0 22px 44px rgba(88, 102, 143, 0.12); --k-shadow-xl: 0 30px 64px rgba(88, 102, 143, 0.16); --k-shadow-2xl: 0 36px 82px rgba(88, 102, 143, 0.18); --k-shadow-glow: 0 0 0 1px rgba(112, 119, 201, 0.04), 0 12px 28px rgba(112, 176, 197, 0.06); --k-shadow-glow-sm: 0 0 0 1px rgba(112, 119, 201, 0.03), 0 6px 14px rgba(112, 176, 197, 0.04); --k-panel: rgba(255,255,255,.90); --k-panel-strong: rgba(255,255,255,.975); --k-overlay-soft: rgba(88, 102, 143, 0.08); --k-hero-glow: radial-gradient(circle at top, rgba(128, 132, 210, 0.06), transparent 46%), radial-gradient(circle at 86% 18%, rgba(112, 176, 197, 0.06), transparent 30%), radial-gradient(circle at 12% 84%, rgba(196, 166, 215, 0.04), transparent 26%); --k-page-gradient: linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 54%, #eef2f8 100%); --k-ring-focus: 0 0 0 3px rgba(99, 180, 207, 0.14); --k-shadow-soft: 0 14px 30px rgba(88, 102, 143, 0.08); --k-shadow-card: 0 16px 34px rgba(88, 102, 143, 0.08), 0 1px 0 rgba(255, 255, 255, 0.82) inset; --k-shadow-floating: 0 24px 56px rgba(88, 102, 143, 0.12); --k-divider-strong: rgba(93, 108, 151, 0.16); --k-accent-sage: #7bc79f; --k-accent-sand: #e6a84a; --k-accent-clay: #e56c86; --k-accent-sky: #63b4cf; --k-grid-line: rgba(108, 115, 210, 0.035); --k-grid-line-strong: rgba(108, 115, 210, 0.06); --k-grid-opacity: .34; } html, body { background: var(--k-page-gradient); } body::before { opacity: var(--k-grid-opacity, .9); content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(var(--k-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--k-grid-line) 1px, transparent 1px), var(--k-hero-glow); background-size: 28px 28px, 28px 28px, cover; } body > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════ 🎨 USER ACCENT SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ :root { --kp-accent-blue: #6a8bd7; --kp-accent-amber: #d79a3b; --kp-accent-emerald: #37b27e; --kp-accent-violet: #8b72df; --kp-accent-rose: #d96d8f; --kp-accent-cyan: #4baecc; --kp-accent-current: var(--kp-accent-blue); } :root[data-kp-accent="blue"] { --kp-accent-current: var(--kp-accent-blue); } :root[data-kp-accent="amber"] { --kp-accent-current: var(--kp-accent-amber); } :root[data-kp-accent="emerald"] { --kp-accent-current: var(--kp-accent-emerald); } :root[data-kp-accent="violet"] { --kp-accent-current: var(--kp-accent-violet); } :root[data-kp-accent="rose"] { --kp-accent-current: var(--kp-accent-rose); } :root[data-kp-accent="cyan"] { --kp-accent-current: var(--kp-accent-cyan); } :root, [data-theme="dark"], [data-theme="light"] { --k-primary: var(--kp-accent-current); --k-primary-light: color-mix(in srgb, var(--kp-accent-current) 78%, white); --k-primary-soft: color-mix(in srgb, var(--kp-accent-current) 14%, transparent); --k-primary-glow: color-mix(in srgb, var(--kp-accent-current) 18%, transparent); --k-chip-bg: color-mix(in srgb, var(--kp-accent-current) 12%, transparent); --k-border-accent: color-mix(in srgb, var(--kp-accent-current) 26%, transparent); --k-accent-border: color-mix(in srgb, var(--kp-accent-current) 26%, transparent); --k-accent-electric: var(--kp-accent-current); --k-accent-spark: color-mix(in srgb, var(--kp-accent-current) 74%, white); --k-gradient-primary: linear-gradient(135deg, color-mix(in srgb, var(--kp-accent-current) 86%, white) 0%, var(--kp-accent-current) 100%); --k-shadow-glow: 0 0 18px color-mix(in srgb, var(--kp-accent-current) 14%, transparent); --k-shadow-glow-sm: 0 0 10px color-mix(in srgb, var(--kp-accent-current) 10%, transparent); } /* ═══════════════════════════════════════════════════════════════════════════ 🎬 KEYFRAMES — Global animations (KoloPlus Design System v5) ═══════════════════════════════════════════════════════════════════════════ */ @keyframes kp-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes kp-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes kp-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes kp-dropIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes kp-slideDown { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes kp-slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes kp-slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes kp-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes kp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } @keyframes kp-spin { to { transform: rotate(360deg); } } @keyframes kp-float { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 0.12; } 90% { opacity: 0.04; } 100% { transform: translateY(-110vh) scale(0.3); opacity: 0; } } @keyframes kp-glowPulse { 0%, 100% { box-shadow: 0 0 16px var(--k-primary-soft); } 50% { box-shadow: 0 0 32px var(--k-primary-glow); } } @keyframes kp-toastIn { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes kp-toastOut { to { opacity: 0; transform: translateY(-8px) scale(0.95); } } @keyframes kp-toastProgress { from { width: 100%; } to { width: 0%; } } @keyframes kp-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes kp-bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } } /* Legacy aliases (for templates using old names) */ @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes dropIn { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes shimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(200%); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes slideDown { from { opacity:0; transform:translateY(-12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }