/** * Token warna & layout LMS — dark (default) dan light. * Atribut `data-theme` pada mengontrol palet aktif. */ :root { --app-sidebar-w: 264px; --app-sidebar-w-collapsed: 76px; --app-footer-h: 56px; } /* ── Dark (default / bright = gelap) ───────────────────────────── */ :root, [data-theme='dark'] { color-scheme: dark; --app-bg: #0f1115; --app-panel: #12141a; --app-panel-2: #151822; --app-surface: rgba(255, 255, 255, 0.04); --app-surface-2: rgba(255, 255, 255, 0.06); --app-surface-3: rgba(255, 255, 255, 0.08); --app-surface-hover: rgba(255, 255, 255, 0.07); --app-surface-active: rgba(255, 255, 255, 0.1); --app-border: rgba(255, 255, 255, 0.08); --app-border-strong: rgba(255, 255, 255, 0.14); --app-text: rgba(255, 255, 255, 0.86); --app-text-secondary: rgba(255, 255, 255, 0.78); --app-text-strong: #ffffff; --app-muted: rgba(255, 255, 255, 0.55); --app-muted-subtle: rgba(255, 255, 255, 0.45); --app-accent: #00d084; --app-accent-hover: #00b874; --app-accent-soft: rgba(0, 208, 132, 0.12); --app-accent-border: rgba(0, 208, 132, 0.25); --app-accent-glow: rgba(0, 208, 132, 0.22); --app-accent-ring: rgba(0, 208, 132, 0.15); --app-link: #7dd3fc; --app-link-hover: #bae6fd; --app-overlay: rgba(0, 0, 0, 0.55); --app-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); --app-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.25); --app-shadow-dropdown: 0 16px 40px rgba(0, 0, 0, 0.35); --app-gradient-1: rgba(0, 208, 132, 0.08); --app-gradient-2: rgba(88, 101, 242, 0.1); --app-topbar-bg: rgba(18, 20, 26, 0.72); --app-footer-bg: rgba(18, 20, 26, 0.94); --app-dropdown-bg: #1a1d26; --app-scrollbar: rgba(255, 255, 255, 0.15); --app-scrollbar-thumb: rgba(255, 255, 255, 0.12); --app-icon-btn-bg: rgba(255, 255, 255, 0.06); --app-icon-btn-border: rgba(255, 255, 255, 0.06); --app-icon-btn-text: rgba(255, 255, 255, 0.82); --app-nav-text: rgba(255, 255, 255, 0.78); --app-nav-icon: rgba(255, 255, 255, 0.5); --app-nav-hover-text: rgba(255, 255, 255, 0.95); --app-nav-active-bg: linear-gradient(135deg, rgba(0, 208, 132, 0.98), rgba(0, 184, 118, 0.92)); --app-nav-active-text: #071510; --app-nav-current-bg: linear-gradient(90deg, rgba(0, 208, 132, 0.16), rgba(0, 208, 132, 0.04)); --app-nav-current-text: #ffffff; --app-nav-sub-border: rgba(0, 208, 132, 0.22); --app-btn-primary-text: #0b1110; --app-btn-primary-from: #00d084; --app-btn-primary-to: #10b981; --app-btn-primary-shadow: 0 10px 28px rgba(0, 208, 132, 0.28); --app-btn-ghost-border: rgba(255, 255, 255, 0.14); --app-btn-ghost-text: rgba(255, 255, 255, 0.82); --app-btn-ghost-hover-bg: rgba(255, 255, 255, 0.08); --app-input-bg: rgba(255, 255, 255, 0.96); --app-input-text: #111827; --app-input-border: rgba(255, 255, 255, 0.14); --app-input-placeholder: #9ca3af; --app-input-focus-border: rgba(0, 208, 132, 0.65); --app-input-focus-ring: rgba(0, 208, 132, 0.18); --app-danger-text: #fca5a5; --app-danger-border: rgba(239, 68, 68, 0.45); --app-danger-bg: rgba(239, 68, 68, 0.12); --app-danger-text-strong: #fecaca; --app-success-text: #a7f3d0; --app-success-bg: rgba(0, 208, 132, 0.12); --app-success-border: rgba(0, 208, 132, 0.35); --app-info-text: #bae6fd; --app-info-bg: rgba(56, 189, 248, 0.12); --app-info-border: rgba(56, 189, 248, 0.35); --app-warning-text: #fde68a; --app-warning-bg: rgba(251, 191, 36, 0.12); --app-warning-border: rgba(251, 191, 36, 0.35); --app-badge-success-text: #052e1b; --app-badge-success-bg: rgba(0, 208, 132, 0.92); --app-badge-info-text: #0c4a6e; --app-badge-info-bg: rgba(125, 211, 252, 0.92); --app-badge-accent-text: #3b0764; --app-badge-accent-bg: rgba(216, 180, 254, 0.92); --app-badge-muted-text: rgba(255, 255, 255, 0.82); --app-badge-muted-bg: rgba(255, 255, 255, 0.1); --app-badge-warning-text: #422006; --app-badge-warning-bg: rgba(251, 191, 36, 0.92); --app-progress-track: rgba(255, 255, 255, 0.08); --app-progress-fill: linear-gradient(90deg, #00d084, #34d399); --app-dashed-border: rgba(255, 255, 255, 0.12); --app-avatar-bg: rgba(0, 208, 132, 0.2); --app-avatar-border: rgba(0, 208, 132, 0.25); --app-avatar-text: rgba(255, 255, 255, 0.92); --app-cart-badge-text: #04140d; --app-cart-badge-border: #12141a; --app-rich-editor-bg: #1e1e1e; --app-select-panel-bg: #ffffff; --app-select-panel-text: #111827; --app-select-option-hover: rgba(0, 208, 132, 0.12); --app-select-option-hover-text: #065f46; --app-theme-toggle-bg: rgba(255, 255, 255, 0.06); --app-theme-toggle-border: rgba(255, 255, 255, 0.1); --app-theme-toggle-icon: rgba(255, 255, 255, 0.82); } /* ── Light (bright) ─────────────────────────────────────────────── */ [data-theme='light'] { color-scheme: light; --app-bg: #f4f6f9; --app-panel: #ffffff; --app-panel-2: #f8fafc; --app-surface: rgba(15, 23, 42, 0.03); --app-surface-2: rgba(15, 23, 42, 0.05); --app-surface-3: rgba(15, 23, 42, 0.07); --app-surface-hover: rgba(15, 23, 42, 0.06); --app-surface-active: rgba(15, 23, 42, 0.09); --app-border: rgba(15, 23, 42, 0.1); --app-border-strong: rgba(15, 23, 42, 0.16); --app-text: rgba(15, 23, 42, 0.88); --app-text-secondary: rgba(15, 23, 42, 0.78); --app-text-strong: #0f172a; --app-muted: rgba(15, 23, 42, 0.55); --app-muted-subtle: rgba(15, 23, 42, 0.42); --app-accent: #00a86b; --app-accent-hover: #008f5c; --app-accent-soft: rgba(0, 168, 107, 0.1); --app-accent-border: rgba(0, 168, 107, 0.28); --app-accent-glow: rgba(0, 168, 107, 0.18); --app-accent-ring: rgba(0, 168, 107, 0.2); --app-link: #0369a1; --app-link-hover: #0284c7; --app-overlay: rgba(15, 23, 42, 0.4); --app-shadow: 0 16px 48px rgba(15, 23, 42, 0.1); --app-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08); --app-shadow-dropdown: 0 12px 32px rgba(15, 23, 42, 0.14); --app-gradient-1: rgba(0, 168, 107, 0.06); --app-gradient-2: rgba(88, 101, 242, 0.05); --app-topbar-bg: rgba(255, 255, 255, 0.88); --app-footer-bg: rgba(255, 255, 255, 0.94); --app-dropdown-bg: #ffffff; --app-scrollbar: rgba(15, 23, 42, 0.12); --app-scrollbar-thumb: rgba(15, 23, 42, 0.18); --app-icon-btn-bg: rgba(15, 23, 42, 0.04); --app-icon-btn-border: rgba(15, 23, 42, 0.08); --app-icon-btn-text: rgba(15, 23, 42, 0.78); --app-nav-text: rgba(15, 23, 42, 0.72); --app-nav-icon: rgba(15, 23, 42, 0.45); --app-nav-hover-text: rgba(15, 23, 42, 0.92); --app-nav-active-bg: linear-gradient(135deg, rgba(0, 168, 107, 0.95), rgba(0, 143, 92, 0.9)); --app-nav-active-text: #ffffff; --app-nav-current-bg: linear-gradient(90deg, rgba(0, 168, 107, 0.14), rgba(0, 168, 107, 0.04)); --app-nav-current-text: #0f172a; --app-nav-sub-border: rgba(0, 168, 107, 0.25); --app-btn-primary-text: #ffffff; --app-btn-primary-from: #00a86b; --app-btn-primary-to: #059669; --app-btn-primary-shadow: 0 8px 20px rgba(0, 168, 107, 0.22); --app-btn-ghost-border: rgba(15, 23, 42, 0.14); --app-btn-ghost-text: rgba(15, 23, 42, 0.78); --app-btn-ghost-hover-bg: rgba(15, 23, 42, 0.06); --app-input-bg: #ffffff; --app-input-text: #0f172a; --app-input-border: rgba(15, 23, 42, 0.16); --app-input-placeholder: #94a3b8; --app-input-focus-border: rgba(0, 168, 107, 0.55); --app-input-focus-ring: rgba(0, 168, 107, 0.15); --app-danger-text: #b91c1c; --app-danger-border: rgba(239, 68, 68, 0.4); --app-danger-bg: rgba(239, 68, 68, 0.08); --app-danger-text-strong: #dc2626; --app-success-text: #047857; --app-success-bg: rgba(16, 185, 129, 0.1); --app-success-border: rgba(16, 185, 129, 0.3); --app-info-text: #0369a1; --app-info-bg: rgba(56, 189, 248, 0.1); --app-info-border: rgba(56, 189, 248, 0.28); --app-warning-text: #b45309; --app-warning-bg: rgba(251, 191, 36, 0.12); --app-warning-border: rgba(245, 158, 11, 0.3); --app-badge-success-text: #065f46; --app-badge-success-bg: rgba(16, 185, 129, 0.18); --app-badge-info-text: #0c4a6e; --app-badge-info-bg: rgba(125, 211, 252, 0.35); --app-badge-accent-text: #5b21b6; --app-badge-accent-bg: rgba(216, 180, 254, 0.45); --app-badge-muted-text: rgba(15, 23, 42, 0.72); --app-badge-muted-bg: rgba(15, 23, 42, 0.06); --app-badge-warning-text: #92400e; --app-badge-warning-bg: rgba(251, 191, 36, 0.35); --app-progress-track: rgba(15, 23, 42, 0.08); --app-progress-fill: linear-gradient(90deg, #00a86b, #34d399); --app-dashed-border: rgba(15, 23, 42, 0.14); --app-avatar-bg: rgba(0, 168, 107, 0.12); --app-avatar-border: rgba(0, 168, 107, 0.28); --app-avatar-text: #047857; --app-cart-badge-text: #ffffff; --app-cart-badge-border: #ffffff; --app-rich-editor-bg: #ffffff; --app-select-panel-bg: #ffffff; --app-select-panel-text: #0f172a; --app-select-option-hover: rgba(0, 168, 107, 0.1); --app-select-option-hover-text: #065f46; --app-theme-toggle-bg: rgba(15, 23, 42, 0.05); --app-theme-toggle-border: rgba(15, 23, 42, 0.1); --app-theme-toggle-icon: rgba(15, 23, 42, 0.72); } /** * Aksen warna CMS (`data-accent`) — orthogonal terhadap dark/light. * Default emerald sudah tertanam di blok tema di atas. */ /* ── Accent: sky ─────────────────────────────────────────────────── */ html[data-accent='sky']:not([data-theme='light']) { --app-accent: #38bdf8; --app-accent-hover: #0ea5e9; --app-accent-soft: rgba(56, 189, 248, 0.12); --app-accent-border: rgba(56, 189, 248, 0.28); --app-accent-glow: rgba(56, 189, 248, 0.22); --app-accent-ring: rgba(56, 189, 248, 0.18); --app-gradient-1: rgba(56, 189, 248, 0.08); --app-nav-active-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.98), rgba(14, 165, 233, 0.92)); --app-nav-active-text: #041018; --app-nav-current-bg: linear-gradient(90deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.04)); --app-nav-sub-border: rgba(56, 189, 248, 0.25); --app-btn-primary-text: #041018; --app-btn-primary-from: #38bdf8; --app-btn-primary-to: #0ea5e9; --app-btn-primary-shadow: 0 10px 28px rgba(56, 189, 248, 0.28); --app-input-focus-border: rgba(56, 189, 248, 0.65); --app-input-focus-ring: rgba(56, 189, 248, 0.18); --app-success-text: #7dd3fc; --app-success-bg: rgba(56, 189, 248, 0.12); --app-success-border: rgba(56, 189, 248, 0.35); --app-badge-success-text: #082f49; --app-badge-success-bg: rgba(56, 189, 248, 0.92); --app-progress-fill: linear-gradient(90deg, #38bdf8, #7dd3fc); --app-avatar-bg: rgba(56, 189, 248, 0.2); --app-avatar-border: rgba(56, 189, 248, 0.28); --app-cart-badge-text: #041018; --app-select-option-hover: rgba(56, 189, 248, 0.12); --app-select-option-hover-text: #0369a1; } html[data-theme='light'][data-accent='sky'] { --app-accent: #0284c7; --app-accent-hover: #0369a1; --app-accent-soft: rgba(2, 132, 199, 0.1); --app-accent-border: rgba(2, 132, 199, 0.28); --app-accent-glow: rgba(2, 132, 199, 0.18); --app-accent-ring: rgba(2, 132, 199, 0.2); --app-gradient-1: rgba(2, 132, 199, 0.06); --app-nav-active-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.95), rgba(3, 105, 161, 0.9)); --app-nav-active-text: #ffffff; --app-nav-current-bg: linear-gradient(90deg, rgba(2, 132, 199, 0.14), rgba(2, 132, 199, 0.04)); --app-nav-sub-border: rgba(2, 132, 199, 0.25); --app-btn-primary-text: #ffffff; --app-btn-primary-from: #0284c7; --app-btn-primary-to: #0369a1; --app-btn-primary-shadow: 0 8px 20px rgba(2, 132, 199, 0.22); --app-input-focus-border: rgba(2, 132, 199, 0.55); --app-input-focus-ring: rgba(2, 132, 199, 0.15); --app-success-text: #0369a1; --app-success-bg: rgba(14, 165, 233, 0.1); --app-success-border: rgba(14, 165, 233, 0.3); --app-badge-success-text: #0c4a6e; --app-badge-success-bg: rgba(56, 189, 248, 0.28); --app-progress-fill: linear-gradient(90deg, #0284c7, #38bdf8); --app-avatar-bg: rgba(2, 132, 199, 0.12); --app-avatar-border: rgba(2, 132, 199, 0.28); --app-avatar-text: #0369a1; --app-select-option-hover: rgba(2, 132, 199, 0.1); --app-select-option-hover-text: #0369a1; } /* ── Accent: violet ──────────────────────────────────────────────── */ html[data-accent='violet']:not([data-theme='light']) { --app-accent: #a78bfa; --app-accent-hover: #8b5cf6; --app-accent-soft: rgba(167, 139, 250, 0.12); --app-accent-border: rgba(167, 139, 250, 0.28); --app-accent-glow: rgba(167, 139, 250, 0.22); --app-accent-ring: rgba(167, 139, 250, 0.18); --app-gradient-1: rgba(167, 139, 250, 0.08); --app-nav-active-bg: linear-gradient(135deg, rgba(167, 139, 250, 0.98), rgba(139, 92, 246, 0.92)); --app-nav-active-text: #12081f; --app-nav-current-bg: linear-gradient(90deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.04)); --app-nav-sub-border: rgba(167, 139, 250, 0.25); --app-btn-primary-text: #12081f; --app-btn-primary-from: #a78bfa; --app-btn-primary-to: #8b5cf6; --app-btn-primary-shadow: 0 10px 28px rgba(167, 139, 250, 0.28); --app-input-focus-border: rgba(167, 139, 250, 0.65); --app-input-focus-ring: rgba(167, 139, 250, 0.18); --app-success-text: #c4b5fd; --app-success-bg: rgba(167, 139, 250, 0.12); --app-success-border: rgba(167, 139, 250, 0.35); --app-badge-success-text: #2e1065; --app-badge-success-bg: rgba(167, 139, 250, 0.92); --app-progress-fill: linear-gradient(90deg, #a78bfa, #c4b5fd); --app-avatar-bg: rgba(167, 139, 250, 0.2); --app-avatar-border: rgba(167, 139, 250, 0.28); --app-cart-badge-text: #12081f; --app-select-option-hover: rgba(167, 139, 250, 0.12); --app-select-option-hover-text: #5b21b6; } html[data-theme='light'][data-accent='violet'] { --app-accent: #7c3aed; --app-accent-hover: #6d28d9; --app-accent-soft: rgba(124, 58, 237, 0.1); --app-accent-border: rgba(124, 58, 237, 0.28); --app-accent-glow: rgba(124, 58, 237, 0.18); --app-accent-ring: rgba(124, 58, 237, 0.2); --app-gradient-1: rgba(124, 58, 237, 0.06); --app-nav-active-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(109, 40, 217, 0.9)); --app-nav-active-text: #ffffff; --app-nav-current-bg: linear-gradient(90deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.04)); --app-nav-sub-border: rgba(124, 58, 237, 0.25); --app-btn-primary-text: #ffffff; --app-btn-primary-from: #7c3aed; --app-btn-primary-to: #6d28d9; --app-btn-primary-shadow: 0 8px 20px rgba(124, 58, 237, 0.22); --app-input-focus-border: rgba(124, 58, 237, 0.55); --app-input-focus-ring: rgba(124, 58, 237, 0.15); --app-success-text: #6d28d9; --app-success-bg: rgba(139, 92, 246, 0.1); --app-success-border: rgba(139, 92, 246, 0.3); --app-badge-success-text: #5b21b6; --app-badge-success-bg: rgba(167, 139, 250, 0.35); --app-progress-fill: linear-gradient(90deg, #7c3aed, #a78bfa); --app-avatar-bg: rgba(124, 58, 237, 0.12); --app-avatar-border: rgba(124, 58, 237, 0.28); --app-avatar-text: #6d28d9; --app-select-option-hover: rgba(124, 58, 237, 0.1); --app-select-option-hover-text: #5b21b6; } /* ── Accent: amber ───────────────────────────────────────────────── */ html[data-accent='amber']:not([data-theme='light']) { --app-accent: #fbbf24; --app-accent-hover: #f59e0b; --app-accent-soft: rgba(251, 191, 36, 0.12); --app-accent-border: rgba(251, 191, 36, 0.28); --app-accent-glow: rgba(251, 191, 36, 0.22); --app-accent-ring: rgba(251, 191, 36, 0.18); --app-gradient-1: rgba(251, 191, 36, 0.08); --app-nav-active-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.98), rgba(245, 158, 11, 0.92)); --app-nav-active-text: #1c1200; --app-nav-current-bg: linear-gradient(90deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.04)); --app-nav-sub-border: rgba(251, 191, 36, 0.25); --app-btn-primary-text: #1c1200; --app-btn-primary-from: #fbbf24; --app-btn-primary-to: #f59e0b; --app-btn-primary-shadow: 0 10px 28px rgba(251, 191, 36, 0.28); --app-input-focus-border: rgba(251, 191, 36, 0.65); --app-input-focus-ring: rgba(251, 191, 36, 0.18); --app-success-text: #fde68a; --app-success-bg: rgba(251, 191, 36, 0.12); --app-success-border: rgba(251, 191, 36, 0.35); --app-badge-success-text: #422006; --app-badge-success-bg: rgba(251, 191, 36, 0.92); --app-progress-fill: linear-gradient(90deg, #fbbf24, #fde68a); --app-avatar-bg: rgba(251, 191, 36, 0.2); --app-avatar-border: rgba(251, 191, 36, 0.28); --app-cart-badge-text: #1c1200; --app-select-option-hover: rgba(251, 191, 36, 0.12); --app-select-option-hover-text: #92400e; } html[data-theme='light'][data-accent='amber'] { --app-accent: #d97706; --app-accent-hover: #b45309; --app-accent-soft: rgba(217, 119, 6, 0.1); --app-accent-border: rgba(217, 119, 6, 0.28); --app-accent-glow: rgba(217, 119, 6, 0.18); --app-accent-ring: rgba(217, 119, 6, 0.2); --app-gradient-1: rgba(217, 119, 6, 0.06); --app-nav-active-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.95), rgba(180, 83, 9, 0.9)); --app-nav-active-text: #ffffff; --app-nav-current-bg: linear-gradient(90deg, rgba(217, 119, 6, 0.14), rgba(217, 119, 6, 0.04)); --app-nav-sub-border: rgba(217, 119, 6, 0.25); --app-btn-primary-text: #ffffff; --app-btn-primary-from: #d97706; --app-btn-primary-to: #b45309; --app-btn-primary-shadow: 0 8px 20px rgba(217, 119, 6, 0.22); --app-input-focus-border: rgba(217, 119, 6, 0.55); --app-input-focus-ring: rgba(217, 119, 6, 0.15); --app-success-text: #b45309; --app-success-bg: rgba(245, 158, 11, 0.1); --app-success-border: rgba(245, 158, 11, 0.3); --app-badge-success-text: #92400e; --app-badge-success-bg: rgba(251, 191, 36, 0.35); --app-progress-fill: linear-gradient(90deg, #d97706, #fbbf24); --app-avatar-bg: rgba(217, 119, 6, 0.12); --app-avatar-border: rgba(217, 119, 6, 0.28); --app-avatar-text: #b45309; --app-select-option-hover: rgba(217, 119, 6, 0.1); --app-select-option-hover-text: #92400e; } /* ── Accent: rose ────────────────────────────────────────────────── */ html[data-accent='rose']:not([data-theme='light']) { --app-accent: #fb7185; --app-accent-hover: #f43f5e; --app-accent-soft: rgba(251, 113, 133, 0.12); --app-accent-border: rgba(251, 113, 133, 0.28); --app-accent-glow: rgba(251, 113, 133, 0.22); --app-accent-ring: rgba(251, 113, 133, 0.18); --app-gradient-1: rgba(251, 113, 133, 0.08); --app-nav-active-bg: linear-gradient(135deg, rgba(251, 113, 133, 0.98), rgba(244, 63, 94, 0.92)); --app-nav-active-text: #1f050a; --app-nav-current-bg: linear-gradient(90deg, rgba(251, 113, 133, 0.16), rgba(251, 113, 133, 0.04)); --app-nav-sub-border: rgba(251, 113, 133, 0.25); --app-btn-primary-text: #1f050a; --app-btn-primary-from: #fb7185; --app-btn-primary-to: #f43f5e; --app-btn-primary-shadow: 0 10px 28px rgba(251, 113, 133, 0.28); --app-input-focus-border: rgba(251, 113, 133, 0.65); --app-input-focus-ring: rgba(251, 113, 133, 0.18); --app-success-text: #fda4af; --app-success-bg: rgba(251, 113, 133, 0.12); --app-success-border: rgba(251, 113, 133, 0.35); --app-badge-success-text: #4c0519; --app-badge-success-bg: rgba(251, 113, 133, 0.92); --app-progress-fill: linear-gradient(90deg, #fb7185, #fda4af); --app-avatar-bg: rgba(251, 113, 133, 0.2); --app-avatar-border: rgba(251, 113, 133, 0.28); --app-cart-badge-text: #1f050a; --app-select-option-hover: rgba(251, 113, 133, 0.12); --app-select-option-hover-text: #be123c; } html[data-theme='light'][data-accent='rose'] { --app-accent: #e11d48; --app-accent-hover: #be123c; --app-accent-soft: rgba(225, 29, 72, 0.1); --app-accent-border: rgba(225, 29, 72, 0.28); --app-accent-glow: rgba(225, 29, 72, 0.18); --app-accent-ring: rgba(225, 29, 72, 0.2); --app-gradient-1: rgba(225, 29, 72, 0.06); --app-nav-active-bg: linear-gradient(135deg, rgba(225, 29, 72, 0.95), rgba(190, 18, 60, 0.9)); --app-nav-active-text: #ffffff; --app-nav-current-bg: linear-gradient(90deg, rgba(225, 29, 72, 0.14), rgba(225, 29, 72, 0.04)); --app-nav-sub-border: rgba(225, 29, 72, 0.25); --app-btn-primary-text: #ffffff; --app-btn-primary-from: #e11d48; --app-btn-primary-to: #be123c; --app-btn-primary-shadow: 0 8px 20px rgba(225, 29, 72, 0.22); --app-input-focus-border: rgba(225, 29, 72, 0.55); --app-input-focus-ring: rgba(225, 29, 72, 0.15); --app-success-text: #be123c; --app-success-bg: rgba(244, 63, 94, 0.1); --app-success-border: rgba(244, 63, 94, 0.3); --app-badge-success-text: #9f1239; --app-badge-success-bg: rgba(251, 113, 133, 0.3); --app-progress-fill: linear-gradient(90deg, #e11d48, #fb7185); --app-avatar-bg: rgba(225, 29, 72, 0.12); --app-avatar-border: rgba(225, 29, 72, 0.28); --app-avatar-text: #be123c; --app-select-option-hover: rgba(225, 29, 72, 0.1); --app-select-option-hover-text: #9f1239; } /* ── Accent: cyan ────────────────────────────────────────────────── */ html[data-accent='cyan']:not([data-theme='light']) { --app-accent: #22d3ee; --app-accent-hover: #06b6d4; --app-accent-soft: rgba(34, 211, 238, 0.12); --app-accent-border: rgba(34, 211, 238, 0.28); --app-accent-glow: rgba(34, 211, 238, 0.22); --app-accent-ring: rgba(34, 211, 238, 0.18); --app-gradient-1: rgba(34, 211, 238, 0.08); --app-nav-active-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.98), rgba(6, 182, 212, 0.92)); --app-nav-active-text: #041416; --app-nav-current-bg: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.04)); --app-nav-sub-border: rgba(34, 211, 238, 0.25); --app-btn-primary-text: #041416; --app-btn-primary-from: #22d3ee; --app-btn-primary-to: #06b6d4; --app-btn-primary-shadow: 0 10px 28px rgba(34, 211, 238, 0.28); --app-input-focus-border: rgba(34, 211, 238, 0.65); --app-input-focus-ring: rgba(34, 211, 238, 0.18); --app-success-text: #67e8f9; --app-success-bg: rgba(34, 211, 238, 0.12); --app-success-border: rgba(34, 211, 238, 0.35); --app-badge-success-text: #083344; --app-badge-success-bg: rgba(34, 211, 238, 0.92); --app-progress-fill: linear-gradient(90deg, #22d3ee, #67e8f9); --app-avatar-bg: rgba(34, 211, 238, 0.2); --app-avatar-border: rgba(34, 211, 238, 0.28); --app-cart-badge-text: #041416; --app-select-option-hover: rgba(34, 211, 238, 0.12); --app-select-option-hover-text: #0e7490; } html[data-theme='light'][data-accent='cyan'] { --app-accent: #0891b2; --app-accent-hover: #0e7490; --app-accent-soft: rgba(8, 145, 178, 0.1); --app-accent-border: rgba(8, 145, 178, 0.28); --app-accent-glow: rgba(8, 145, 178, 0.18); --app-accent-ring: rgba(8, 145, 178, 0.2); --app-gradient-1: rgba(8, 145, 178, 0.06); --app-nav-active-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.95), rgba(14, 116, 144, 0.9)); --app-nav-active-text: #ffffff; --app-nav-current-bg: linear-gradient(90deg, rgba(8, 145, 178, 0.14), rgba(8, 145, 178, 0.04)); --app-nav-sub-border: rgba(8, 145, 178, 0.25); --app-btn-primary-text: #ffffff; --app-btn-primary-from: #0891b2; --app-btn-primary-to: #0e7490; --app-btn-primary-shadow: 0 8px 20px rgba(8, 145, 178, 0.22); --app-input-focus-border: rgba(8, 145, 178, 0.55); --app-input-focus-ring: rgba(8, 145, 178, 0.15); --app-success-text: #0e7490; --app-success-bg: rgba(6, 182, 212, 0.1); --app-success-border: rgba(6, 182, 212, 0.3); --app-badge-success-text: #155e75; --app-badge-success-bg: rgba(34, 211, 238, 0.28); --app-progress-fill: linear-gradient(90deg, #0891b2, #22d3ee); --app-avatar-bg: rgba(8, 145, 178, 0.12); --app-avatar-border: rgba(8, 145, 178, 0.28); --app-avatar-text: #0e7490; --app-select-option-hover: rgba(8, 145, 178, 0.1); --app-select-option-hover-text: #155e75; }