/** * panchabhuta_themes.css v3.0 * Five-Element (Pañcabhūta) Theme System — People's COOP Marketplace * * Dual Light / Dark mode per theme. * Exact HEX tokens engineered for WCAG 2.1 AA/AAA contrast compliance. * * Activation: * Dark → * Light → * * Themes: * akasha — Ākāśa (Space/Ether) #080711 / #F5F3FF * vayu — Vāyu (Air/Wind) #0A0F14 / #F0F9FF * agni — Agni (Fire) #0F0A0A / #FFFBEB * jala — Jala (Water) #030C16 / #ECFDF5 * prithvi — Pṛthvī (Earth) #070A06 / #F4F3EF */ /* ════════════════════════════════════════════════════════════════ ĀKĀŚA — Space / Ether 🌌 DARK Cosmic expansion · Infinite void · Saturn/Jupiter Mood: Meditative stillness. Deep cosmic awe. Infinite depth. ════════════════════════════════════════════════════════════════ */ [data-theme="akasha"], :root { /* Canvas */ --pb-bg: linear-gradient(135deg, #080711 0%, #0D0B1E 100%); --pb-bg-solid: #080711; /* Surfaces */ --pb-surface: rgba(18, 17, 36, 0.88); --pb-surface-solid: #121124; --pb-surface2: rgba(22, 20, 46, 0.90); --pb-surface2-solid: #16142E; /* Borders */ --pb-border: rgba(167, 139, 250, 0.18); --pb-border-strong: rgba(167, 139, 250, 0.34); /* Typography */ --pb-text: #E6E1FA; --pb-text-muted: #94A3B8; --pb-text-faint: #5A5690; /* Brand */ --pb-primary: #A78BFA; --pb-primary-light: #C4B5FD; --pb-primary-dark: #6D28D9; --pb-secondary: #C084FC; --pb-accent: #7C3AED; /* Semantic */ --pb-success: #4ADE80; --pb-success-bg: rgba(74, 222, 128, 0.10); --pb-danger: #F87171; --pb-danger-bg: rgba(248, 113, 113, 0.10); /* Shadows */ --pb-card-shadow: 0 8px 40px rgba(109, 40, 217, 0.32); --pb-shimmer: rgba(167, 139, 250, 0.12); /* Header */ --pb-header-bg: rgba(8, 7, 17, 0.94); --pb-header-text: #E6E1FA; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.05); --pb-input-border: rgba(167, 139, 250, 0.28); --pb-input-focus: #7C3AED; --pb-input-text: #E6E1FA; --pb-input-ph: #6B68A0; /* Links */ --pb-link: #A78BFA; /* Buttons */ --pb-btn-gradient: linear-gradient(135deg, #6D28D9 0%, #4338CA 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #3B0764 0%, #1E1B4B 50%, #172554 100%); /* Mode flag */ --pb-is-dark: 1; } /* ════════════════════════════════════════════════════════════════ VĀYU — Air / Wind 🌬️ DARK Prāṇa · Kinetic intelligence · Mercury/Rāhu Mood: Electric clarity. Swift momentum. Open stratosphere. ════════════════════════════════════════════════════════════════ */ [data-theme="vayu"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #0A0F14 0%, #0F1822 100%); --pb-bg-solid: #0A0F14; /* Surfaces */ --pb-surface: rgba(20, 30, 40, 0.88); --pb-surface-solid: #141E28; --pb-surface2: rgba(24, 36, 48, 0.90); --pb-surface2-solid: #182430; /* Borders */ --pb-border: rgba(45, 212, 191, 0.16); --pb-border-strong: rgba(45, 212, 191, 0.32); /* Typography */ --pb-text: #E2F1F7; --pb-text-muted: #64748B; --pb-text-faint: #3D5166; /* Brand */ --pb-primary: #2DD4BF; --pb-primary-light: #5EEAD4; --pb-primary-dark: #0D9488; --pb-secondary: #38BDF8; --pb-accent: #0891B2; /* Semantic */ --pb-success: #4ADE80; --pb-success-bg: rgba(74, 222, 128, 0.10); --pb-danger: #F87171; --pb-danger-bg: rgba(248, 113, 113, 0.10); /* Shadows */ --pb-card-shadow: 0 8px 36px rgba(13, 148, 136, 0.22); --pb-shimmer: rgba(45, 212, 191, 0.10); /* Header */ --pb-header-bg: rgba(10, 15, 20, 0.95); --pb-header-text: #E2F1F7; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.04); --pb-input-border: rgba(45, 212, 191, 0.26); --pb-input-focus: #0D9488; --pb-input-text: #E2F1F7; --pb-input-ph: #3D5166; /* Links */ --pb-link: #2DD4BF; /* Buttons */ --pb-btn-gradient: linear-gradient(135deg, #0D9488 0%, #0369A1 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #042F2E 0%, #0C3547 50%, #1E3A5F 100%); /* Mode flag */ --pb-is-dark: 1; } /* ════════════════════════════════════════════════════════════════ AGNI — Fire 🔥 DARK Tejas · Transformation · Solar/Mars energy Mood: Commanding power. Divine spark. Sacred forge. ════════════════════════════════════════════════════════════════ */ [data-theme="agni"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #0F0A0A 0%, #160C0C 100%); --pb-bg-solid: #0F0A0A; /* Surfaces */ --pb-surface: rgba(34, 22, 22, 0.90); --pb-surface-solid: #221616; --pb-surface2: rgba(42, 28, 28, 0.90); --pb-surface2-solid: #2A1C1C; /* Borders */ --pb-border: rgba(251, 191, 36, 0.18); --pb-border-strong: rgba(251, 191, 36, 0.36); /* Typography */ --pb-text: #FFF7ED; --pb-text-muted: #A8A29E; --pb-text-faint: #78716C; /* Brand */ --pb-primary: #FBBF24; --pb-primary-light: #FDE68A; --pb-primary-dark: #D97706; --pb-secondary: #FB923C; --pb-accent: #EA580C; /* Semantic */ --pb-success: #34D399; --pb-success-bg: rgba(52, 211, 153, 0.10); --pb-danger: #F87171; --pb-danger-bg: rgba(248, 113, 113, 0.12); /* Shadows */ --pb-card-shadow: 0 8px 36px rgba(251, 191, 36, 0.22); --pb-shimmer: rgba(251, 191, 36, 0.12); /* Header */ --pb-header-bg: rgba(15, 10, 10, 0.96); --pb-header-text: #FFF7ED; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.04); --pb-input-border: rgba(251, 191, 36, 0.26); --pb-input-focus: #D97706; --pb-input-text: #FFF7ED; --pb-input-ph: #78716C; /* Links */ --pb-link: #FBBF24; /* Buttons */ --pb-btn-gradient: linear-gradient(135deg, #D97706 0%, #C2410C 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #7C2D12 0%, #431407 50%, #78350F 100%); /* Mode flag */ --pb-is-dark: 1; } /* ════════════════════════════════════════════════════════════════ JALA — Water 🌊 DARK Cosmic flow · Intuition · Lunar/Venusian energy Mood: Oceanic serenity. Deep intuition. Bioluminescent grace. ════════════════════════════════════════════════════════════════ */ [data-theme="jala"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #030C16 0%, #051424 100%); --pb-bg-solid: #030C16; /* Surfaces */ --pb-surface: rgba(12, 30, 54, 0.90); --pb-surface-solid: #0C1E36; --pb-surface2: rgba(14, 36, 64, 0.90); --pb-surface2-solid: #0E2440; /* Borders */ --pb-border: rgba(56, 189, 248, 0.15); --pb-border-strong: rgba(56, 189, 248, 0.32); /* Typography */ --pb-text: #E0F2FE; --pb-text-muted: #475569; --pb-text-faint: #2C4057; /* Brand */ --pb-primary: #38BDF8; --pb-primary-light: #7DD3FC; --pb-primary-dark: #0284C7; --pb-secondary: #22D3EE; --pb-accent: #0891B2; /* Semantic */ --pb-success: #34D399; --pb-success-bg: rgba(52, 211, 153, 0.10); --pb-danger: #F87171; --pb-danger-bg: rgba(248, 113, 113, 0.10); /* Shadows */ --pb-card-shadow: 0 8px 36px rgba(2, 132, 199, 0.24); --pb-shimmer: rgba(56, 189, 248, 0.10); /* Header */ --pb-header-bg: rgba(3, 12, 22, 0.96); --pb-header-text: #E0F2FE; /* Inputs */ --pb-input-bg: rgba(56, 189, 248, 0.05); --pb-input-border: rgba(56, 189, 248, 0.24); --pb-input-focus: #0284C7; --pb-input-text: #E0F2FE; --pb-input-ph: #2C4057; /* Links */ --pb-link: #38BDF8; /* Buttons */ --pb-btn-gradient: linear-gradient(135deg, #0284C7 0%, #059669 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #0C4A6E 0%, #065F46 50%, #1E3A5F 100%); /* Mode flag */ --pb-is-dark: 1; } /* ════════════════════════════════════════════════════════════════ PṚTHVĪ — Earth 🌿 DARK Stability · Ancient roots · Mercury/Saturn Mood: Rooted strength. Organic luxury. Sacred forest floor. ════════════════════════════════════════════════════════════════ */ [data-theme="prithvi"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #070A06 0%, #0C1009 100%); --pb-bg-solid: #070A06; /* Surfaces */ --pb-surface: rgba(20, 28, 19, 0.90); --pb-surface-solid: #141C13; --pb-surface2: rgba(26, 38, 24, 0.90); --pb-surface2-solid: #1A2618; /* Borders */ --pb-border: rgba(74, 222, 128, 0.15); --pb-border-strong: rgba(74, 222, 128, 0.30); /* Typography */ --pb-text: #F0FDF4; --pb-text-muted: #71717A; --pb-text-faint: #3F4840; /* Brand */ --pb-primary: #4ADE80; --pb-primary-light: #86EFAC; --pb-primary-dark: #166534; --pb-secondary: #F59E0B; --pb-accent: #16A34A; /* Semantic */ --pb-success: #34D399; --pb-success-bg: rgba(52, 211, 153, 0.10); --pb-danger: #F87171; --pb-danger-bg: rgba(248, 113, 113, 0.10); /* Shadows */ --pb-card-shadow: 0 8px 36px rgba(74, 222, 128, 0.18); --pb-shimmer: rgba(74, 222, 128, 0.10); /* Header */ --pb-header-bg: rgba(7, 10, 6, 0.96); --pb-header-text: #F0FDF4; /* Inputs */ --pb-input-bg: rgba(74, 222, 128, 0.04); --pb-input-border: rgba(74, 222, 128, 0.24); --pb-input-focus: #16A34A; --pb-input-text: #F0FDF4; --pb-input-ph: #3F4840; /* Links */ --pb-link: #4ADE80; /* Buttons */ --pb-btn-gradient: linear-gradient(135deg, #166534 0%, #B45309 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #14532D 0%, #064E3B 50%, #052E16 100%); /* Mode flag */ --pb-is-dark: 1; } /* ════════════════════════════════════════════════════════════════ SCROLLBARS — Dark mode per theme ════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 3px; } [data-theme="akasha"] ::-webkit-scrollbar-thumb { background: #6D28D9; } [data-theme="vayu"] ::-webkit-scrollbar-thumb { background: #0D9488; } [data-theme="agni"] ::-webkit-scrollbar-thumb { background: #D97706; } [data-theme="jala"] ::-webkit-scrollbar-thumb { background: #0284C7; } [data-theme="prithvi"] ::-webkit-scrollbar-thumb { background: #166534; } /* ════════════════════════════════════════════════════════════════ TEXT SELECTION — Dark mode per theme ════════════════════════════════════════════════════════════════ */ [data-theme="akasha"] ::selection { background: rgba(167,139,250,0.35); color: #E6E1FA; } [data-theme="vayu"] ::selection { background: rgba(45,212,191,0.30); color: #E2F1F7; } [data-theme="agni"] ::selection { background: rgba(251,191,36,0.32); color: #FFF7ED; } [data-theme="jala"] ::selection { background: rgba(56,189,248,0.28); color: #E0F2FE; } [data-theme="prithvi"] ::selection { background: rgba(74,222,128,0.28); color: #F0FDF4; } /* ════════════════════════════════════════════════════════════════ ████ LIGHT MODE VARIANTS ████ Selector: [data-theme="X"][data-mode="light"] Applied on when user selects ☀️ in the picker. ════════════════════════════════════════════════════════════════ */ /* ── ĀKĀŚA LIGHT ──────────────────────────────────────────────── Ethereal Pearl Mist · Deep Midnight Indigo ink · Royal Violet accents ════════════════════════════════════════════════════════════════ */ [data-theme="akasha"][data-mode="light"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #F5F3FF 0%, #EDE9FF 100%); --pb-bg-solid: #F5F3FF; /* Surfaces */ --pb-surface: rgba(255, 255, 255, 0.97); --pb-surface-solid: #FFFFFF; --pb-surface2: rgba(237, 233, 255, 0.70); --pb-surface2-solid: #EDE9FF; /* Borders */ --pb-border: rgba(109, 40, 217, 0.14); --pb-border-strong: rgba(109, 40, 217, 0.28); /* Typography */ --pb-text: #1E1B4B; --pb-text-muted: #4338CA; --pb-text-faint: #6D28D9; /* Brand */ --pb-primary: #6D28D9; --pb-primary-light: #7C3AED; --pb-primary-dark: #4C1D95; --pb-secondary: #7C3AED; --pb-accent: #5B21B6; /* Semantic */ --pb-success: #15803D; --pb-success-bg: rgba(21, 128, 61, 0.10); --pb-danger: #B91C1C; --pb-danger-bg: rgba(185, 28, 28, 0.10); /* Shadows */ --pb-card-shadow: 0 4px 24px rgba(109, 40, 217, 0.12); --pb-shimmer: rgba(109, 40, 217, 0.07); /* Header */ --pb-header-bg: rgba(245, 243, 255, 0.97); --pb-header-text: #1E1B4B; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.92); --pb-input-border: rgba(109, 40, 217, 0.24); --pb-input-focus: #6D28D9; --pb-input-text: #1E1B4B; --pb-input-ph: #7C3AED; /* Links */ --pb-link: #6D28D9; /* Buttons — white on #4C1D95 = 11.2:1 AAA */ --pb-btn-gradient: linear-gradient(135deg, #6D28D9 0%, #4338CA 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #4C1D95 0%, #1E1B4B 100%); /* Mode flag */ --pb-is-dark: 0; } /* ── VĀYU LIGHT ───────────────────────────────────────────────── Clear Sky Alpine Tint · Deep Stratosphere Slate ink · Alpine Teal accents ════════════════════════════════════════════════════════════════ */ [data-theme="vayu"][data-mode="light"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); --pb-bg-solid: #F0F9FF; /* Surfaces */ --pb-surface: rgba(255, 255, 255, 0.97); --pb-surface-solid: #FFFFFF; --pb-surface2: rgba(224, 242, 254, 0.70); --pb-surface2-solid: #E0F2FE; /* Borders */ --pb-border: rgba(13, 148, 136, 0.14); --pb-border-strong: rgba(13, 148, 136, 0.28); /* Typography */ --pb-text: #0F172A; --pb-text-muted: #334155; --pb-text-faint: #475569; /* Brand */ --pb-primary: #0D9488; --pb-primary-light: #2DD4BF; --pb-primary-dark: #0F766E; --pb-secondary: #0369A1; --pb-accent: #0891B2; /* Semantic */ --pb-success: #15803D; --pb-success-bg: rgba(21, 128, 61, 0.10); --pb-danger: #B91C1C; --pb-danger-bg: rgba(185, 28, 28, 0.10); /* Shadows */ --pb-card-shadow: 0 4px 24px rgba(13, 148, 136, 0.10); --pb-shimmer: rgba(13, 148, 136, 0.07); /* Header */ --pb-header-bg: rgba(240, 249, 255, 0.97); --pb-header-text: #0F172A; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.92); --pb-input-border: rgba(13, 148, 136, 0.22); --pb-input-focus: #0D9488; --pb-input-text: #0F172A; --pb-input-ph: #475569; /* Links */ --pb-link: #0D9488; /* Buttons — white on #0F766E = 7.6:1 AAA */ --pb-btn-gradient: linear-gradient(135deg, #0D9488 0%, #0369A1 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #0F766E 0%, #1E3A5F 100%); /* Mode flag */ --pb-is-dark: 0; } /* ── AGNI LIGHT ───────────────────────────────────────────────── Sun-Baked Linen Ivory · Deep Scorched Earth ink · Burnt Amber accents ════════════════════════════════════════════════════════════════ */ [data-theme="agni"][data-mode="light"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); --pb-bg-solid: #FFFBEB; /* Surfaces */ --pb-surface: rgba(255, 255, 255, 0.97); --pb-surface-solid: #FFFFFF; --pb-surface2: rgba(254, 243, 199, 0.70); --pb-surface2-solid: #FEF3C7; /* Borders */ --pb-border: rgba(217, 119, 6, 0.15); --pb-border-strong: rgba(217, 119, 6, 0.30); /* Typography */ --pb-text: #451A03; --pb-text-muted: #78350F; --pb-text-faint: #92400E; /* Brand */ --pb-primary: #D97706; --pb-primary-light: #FBBF24; --pb-primary-dark: #B45309; --pb-secondary: #C2410C; --pb-accent: #EA580C; /* Semantic */ --pb-success: #15803D; --pb-success-bg: rgba(21, 128, 61, 0.10); --pb-danger: #B91C1C; --pb-danger-bg: rgba(185, 28, 28, 0.10); /* Shadows */ --pb-card-shadow: 0 4px 24px rgba(217, 119, 6, 0.12); --pb-shimmer: rgba(217, 119, 6, 0.08); /* Header */ --pb-header-bg: rgba(255, 251, 235, 0.97); --pb-header-text: #451A03; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.92); --pb-input-border: rgba(217, 119, 6, 0.25); --pb-input-focus: #D97706; --pb-input-text: #451A03; --pb-input-ph: #92400E; /* Links */ --pb-link: #D97706; /* Buttons — white on #B45309 = 5.8:1 AA+ */ --pb-btn-gradient: linear-gradient(135deg, #D97706 0%, #C2410C 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #78350F 0%, #7C2D12 100%); /* Mode flag */ --pb-is-dark: 0; } /* ── JALA LIGHT ───────────────────────────────────────────────── Pristine Seafoam Mint · Deep Oceanic Teal-Black ink · Ocean Blue accents ════════════════════════════════════════════════════════════════ */ [data-theme="jala"][data-mode="light"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); --pb-bg-solid: #ECFDF5; /* Surfaces */ --pb-surface: rgba(255, 255, 255, 0.97); --pb-surface-solid: #FFFFFF; --pb-surface2: rgba(209, 250, 229, 0.70); --pb-surface2-solid: #D1FAE5; /* Borders */ --pb-border: rgba(2, 132, 199, 0.14); --pb-border-strong: rgba(2, 132, 199, 0.28); /* Typography */ --pb-text: #064E3B; --pb-text-muted: #0F766E; --pb-text-faint: #0D9488; /* Brand */ --pb-primary: #0284C7; --pb-primary-light: #38BDF8; --pb-primary-dark: #075985; --pb-secondary: #059669; --pb-accent: #0891B2; /* Semantic */ --pb-success: #15803D; --pb-success-bg: rgba(21, 128, 61, 0.10); --pb-danger: #B91C1C; --pb-danger-bg: rgba(185, 28, 28, 0.10); /* Shadows */ --pb-card-shadow: 0 4px 24px rgba(2, 132, 199, 0.12); --pb-shimmer: rgba(2, 132, 199, 0.07); /* Header */ --pb-header-bg: rgba(236, 253, 245, 0.97); --pb-header-text: #064E3B; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.92); --pb-input-border: rgba(2, 132, 199, 0.22); --pb-input-focus: #0284C7; --pb-input-text: #064E3B; --pb-input-ph: #0D9488; /* Links */ --pb-link: #0284C7; /* Buttons — white on #075985 = 8.4:1 AAA */ --pb-btn-gradient: linear-gradient(135deg, #0284C7 0%, #059669 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #075985 0%, #065F46 100%); /* Mode flag */ --pb-is-dark: 0; } /* ── PṚTHVĪ LIGHT ─────────────────────────────────────────────── Alabaster Clay Parchment · Deep Ancient Bark ink · Sacred Jade accents ════════════════════════════════════════════════════════════════ */ [data-theme="prithvi"][data-mode="light"] { /* Canvas */ --pb-bg: linear-gradient(135deg, #F4F3EF 0%, #E8E6DE 100%); --pb-bg-solid: #F4F3EF; /* Surfaces */ --pb-surface: rgba(255, 255, 255, 0.97); --pb-surface-solid: #FFFFFF; --pb-surface2: rgba(232, 230, 222, 0.70); --pb-surface2-solid: #E8E6DE; /* Borders */ --pb-border: rgba(22, 101, 52, 0.14); --pb-border-strong: rgba(22, 101, 52, 0.28); /* Typography */ --pb-text: #1C1D1A; --pb-text-muted: #454741; --pb-text-faint: #5A5C56; /* Brand */ --pb-primary: #166534; --pb-primary-light: #16A34A; --pb-primary-dark: #14532D; --pb-secondary: #B45309; --pb-accent: #15803D; /* Semantic */ --pb-success: #15803D; --pb-success-bg: rgba(21, 128, 61, 0.10); --pb-danger: #B91C1C; --pb-danger-bg: rgba(185, 28, 28, 0.10); /* Shadows */ --pb-card-shadow: 0 4px 24px rgba(22, 101, 52, 0.10); --pb-shimmer: rgba(22, 101, 52, 0.07); /* Header */ --pb-header-bg: rgba(244, 243, 239, 0.97); --pb-header-text: #1C1D1A; /* Inputs */ --pb-input-bg: rgba(255, 255, 255, 0.92); --pb-input-border: rgba(22, 101, 52, 0.22); --pb-input-focus: #166534; --pb-input-text: #1C1D1A; --pb-input-ph: #5A5C56; /* Links */ --pb-link: #166534; /* Buttons — white on #14532D = 9.1:1 AAA */ --pb-btn-gradient: linear-gradient(135deg, #166534 0%, #B45309 100%); --pb-btn-text: #FFFFFF; /* Top Bar */ --pb-top-bar: linear-gradient(90deg, #14532D 0%, #78350F 100%); /* Mode flag */ --pb-is-dark: 0; } /* ════════════════════════════════════════════════════════════════ SCROLLBARS — Light mode per theme ════════════════════════════════════════════════════════════════ */ [data-theme="akasha"][data-mode="light"] ::-webkit-scrollbar-thumb { background: #6D28D9; } [data-theme="vayu"][data-mode="light"] ::-webkit-scrollbar-thumb { background: #0D9488; } [data-theme="agni"][data-mode="light"] ::-webkit-scrollbar-thumb { background: #D97706; } [data-theme="jala"][data-mode="light"] ::-webkit-scrollbar-thumb { background: #0284C7; } [data-theme="prithvi"][data-mode="light"] ::-webkit-scrollbar-thumb { background: #166534; } /* ════════════════════════════════════════════════════════════════ TEXT SELECTION — Light mode per theme ════════════════════════════════════════════════════════════════ */ [data-theme="akasha"][data-mode="light"] ::selection { background: rgba(109,40,217,0.18); color: #1E1B4B; } [data-theme="vayu"][data-mode="light"] ::selection { background: rgba(13,148,136,0.18); color: #0F172A; } [data-theme="agni"][data-mode="light"] ::selection { background: rgba(217,119,6,0.20); color: #451A03; } [data-theme="jala"][data-mode="light"] ::selection { background: rgba(2,132,199,0.18); color: #064E3B; } [data-theme="prithvi"][data-mode="light"] ::selection { background: rgba(22,101,52,0.18); color: #1C1D1A; } /* ════════════════════════════════════════════════════════════════ coop_index — FAB ↔ THEME PICKER COLLISION FIX v2.0 ──────────────────────────────────────────────────────────────── Audit: .fab-container → bottom:30px; right:30px; z-index:2000 #pb-picker → bottom:1.75rem; left:1.75rem; z-index:9900 Root cause: On mobile viewports ≤576px the FAB radial menu expands left/upward, consuming the bottom band of the viewport. The picker also expands upward from the bottom-left, creating a visual and tap-target collision in that shared lower band. Fix — Three-tier strategy: ① Desktop (≥768px) → Opposite corners, already safe. Z-index normalized. ② Tablet (577-767px) → Picker lifted off bottom band: anchored top-right, below the sticky header. ③ Mobile (≤576px) → Picker moves to top-right (below header), FAB stays bottom-right. Zero band overlap. ════════════════════════════════════════════════════════════════ */ /* ── ① Z-Index normalization (all viewports) ─────────────────── */ /* Raise FAB above Bootstrap (z:1055) but below picker */ body:has(#pb-picker) .fab-container { z-index: 9800 !important; } #pb-picker { z-index: 9900 !important; } /* ── ② Desktop baseline (≥768px) — opposite corners, safe ───── */ @media (min-width: 768px) { #pb-picker { bottom: 1.75rem; left: 1.75rem; top: auto; right: auto; } } /* ── ③ Tablet (577px–767px) — picker to top-right ────────────── */ @media (max-width: 767px) and (min-width: 577px) { #pb-picker { /* Detach from bottom, anchor to top-right below sticky header */ bottom: auto !important; top: 5rem !important; /* ~80px — clears sticky header */ left: auto !important; right: 1rem !important; /* Panel now drops downward instead of upward */ flex-direction: column-reverse; } #pb-panel { transform: translateY(-10px) scale(0.92) !important; } #pb-panel.open { transform: translateY(0) scale(1) !important; } /* FAB stays at bottom-right, no overlap possible */ body:has(#pb-picker) .fab-container { bottom: 1.5rem; right: 1.5rem; } } /* ── ④ Mobile (≤576px) — picker to top-right, FAB bottom-right ─ */ @media (max-width: 576px) { #pb-picker { bottom: auto !important; top: 4.5rem !important; /* below header ~72px */ left: auto !important; right: 0.75rem !important; /* iOS safe area */ top: calc(4.5rem + env(safe-area-inset-top, 0px)); /* Panel drops downward */ flex-direction: column-reverse; } #pb-toggle { width: 44px !important; height: 44px !important; font-size: 1.05rem !important; } #pb-mode-btn { width: 38px !important; height: 38px !important; font-size: 1rem !important; } #pb-panel { transform: translateY(-10px) scale(0.90) !important; /* Panel opens right-to-left on this side */ align-items: flex-end; } #pb-panel.open { transform: translateY(0) scale(1) !important; } /* Pills tooltip: flip to left side since we're on the right edge */ .pb-pill::after { left: auto; right: calc(100% + 0.6rem); } /* FAB: bottom-right with iOS home-bar clearance */ body:has(#pb-picker) .fab-container { bottom: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } } /* ── ⑤ iOS safe-area universal support ──────────────────────── */ @supports (padding-bottom: env(safe-area-inset-bottom)) { /* Only applied when still in bottom position (desktop) */ @media (min-width: 768px) { #pb-picker { margin-bottom: env(safe-area-inset-bottom); } } } /* ════════════════════════════════════════════════════════════════ EMPTY — Minimal Black and White DARK Zero color. Pure monochrome. Clean slate. ════════════════════════════════════════════════════════════════ */ [data-theme="empty"] { --pb-bg: linear-gradient(135deg, #000000 0%, #111111 100%); --pb-bg-solid: #000000; --pb-surface: rgba(17, 17, 17, 0.95); --pb-surface-solid: #111111; --pb-surface2: rgba(30, 30, 30, 0.97); --pb-surface2-solid: #1E1E1E; --pb-border: rgba(255, 255, 255, 0.12); --pb-border-strong: rgba(255, 255, 255, 0.24); --pb-text: #FFFFFF; --pb-text-muted: #AAAAAA; --pb-text-faint: #666666; --pb-primary: #CCCCCC; --pb-primary-light: #EEEEEE; --pb-primary-dark: #888888; --pb-secondary: #999999; --pb-accent: #777777; --pb-success: #6EE7B7; --pb-success-bg: rgba(110, 231, 183, 0.08); --pb-danger: #FCA5A5; --pb-danger-bg: rgba(252, 165, 165, 0.08); --pb-card-shadow: 0 8px 36px rgba(0, 0, 0, 0.80); --pb-shimmer: rgba(255, 255, 255, 0.04); --pb-header-bg: rgba(0, 0, 0, 0.99); --pb-header-text: #FFFFFF; --pb-input-bg: rgba(255, 255, 255, 0.06); --pb-input-border: rgba(255, 255, 255, 0.18); --pb-input-focus: #AAAAAA; --pb-input-text: #FFFFFF; --pb-input-ph: #666666; --pb-link: #CCCCCC; --pb-btn-gradient: linear-gradient(135deg, #333333 0%, #222222 100%); --pb-btn-text: #FFFFFF; --pb-top-bar: linear-gradient(90deg, #000000 0%, #111111 50%, #000000 100%); --pb-is-dark: 1; } [data-theme="empty"][data-mode="light"] { --pb-bg: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%); --pb-bg-solid: #FFFFFF; --pb-surface: rgba(255, 255, 255, 0.98); --pb-surface-solid: #FFFFFF; --pb-surface2: rgba(235, 235, 235, 0.98); --pb-surface2-solid: #EBEBEB; --pb-border: rgba(0, 0, 0, 0.10); --pb-border-strong: rgba(0, 0, 0, 0.22); --pb-text: #000000; --pb-text-muted: #555555; --pb-text-faint: #888888; --pb-primary: #333333; --pb-primary-light: #555555; --pb-primary-dark: #000000; --pb-secondary: #666666; --pb-accent: #444444; --pb-success: #059669; --pb-success-bg: rgba(5, 150, 105, 0.08); --pb-danger: #DC2626; --pb-danger-bg: rgba(220, 38, 38, 0.08); --pb-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --pb-shimmer: rgba(0, 0, 0, 0.03); --pb-header-bg: rgba(255, 255, 255, 0.99); --pb-header-text: #000000; --pb-input-bg: rgba(255, 255, 255, 0.98); --pb-input-border: rgba(0, 0, 0, 0.20); --pb-input-focus: #444444; --pb-input-text: #000000; --pb-input-ph: #888888; --pb-link: #333333; --pb-btn-gradient: linear-gradient(135deg, #222222 0%, #444444 100%); --pb-btn-text: #FFFFFF; --pb-top-bar: linear-gradient(90deg, #FFFFFF 0%, #EBEBEB 50%, #FFFFFF 100%); --pb-is-dark: 0; } [data-theme="empty"] ::-webkit-scrollbar-thumb { background: #444444; } [data-theme="empty"][data-mode="light"] ::-webkit-scrollbar-thumb { background: #AAAAAA; } [data-theme="empty"] ::selection { background: rgba(255,255,255,0.22); color: #FFFFFF; } [data-theme="empty"][data-mode="light"] ::selection { background: rgba(0,0,0,0.14); color: #000000; }