.dark.theme-pumpkin { --background: 30 40% 3%; --foreground: 30 30% 92%; --card: 25 30% 7%; --card-foreground: 30 30% 92%; --popover: 25 30% 7%; --popover-foreground: 30 30% 92%; --primary: 25 95% 50%; --primary-foreground: 30 20% 5%; --secondary: 35 100% 45%; --secondary-foreground: 30 20% 5%; --muted: 25 15% 12%; --muted-foreground: 30 12% 60%; --accent: 15 100% 45%; --accent-foreground: 0 0% 100%; --destructive: 0 70% 50%; --destructive-foreground: 0 0% 100%; --border: 25 20% 16%; --input: 25 20% 16%; --ring: 25 95% 50%; --radius: 0.5rem; --sidebar: 25 35% 4%; --sidebar-foreground: 30 30% 92%; --sidebar-primary: 25 95% 50%; --sidebar-primary-foreground: 30 20% 5%; --sidebar-accent: 15 100% 45%; --sidebar-accent-foreground: 0 0% 100%; --sidebar-border: 25 18% 14%; --sidebar-ring: 25 95% 50%; } .light.theme-pumpkin { --background: 30 30% 94%; --foreground: 25 40% 12%; --card: 0 0% 100%; --card-foreground: 25 40% 12%; --popover: 0 0% 100%; --popover-foreground: 25 40% 12%; --primary: 25 90% 42%; --primary-foreground: 0 0% 100%; --secondary: 35 90% 42%; --secondary-foreground: 0 0% 100%; --muted: 30 15% 86%; --muted-foreground: 25 10% 42%; --accent: 15 90% 42%; --accent-foreground: 0 0% 100%; --destructive: 0 80% 50%; --destructive-foreground: 0 0% 100%; --border: 25 15% 80%; --input: 25 15% 80%; --ring: 25 90% 42%; --radius: 0.5rem; --sidebar: 0 0% 100%; --sidebar-foreground: 25 40% 12%; --sidebar-primary: 25 90% 42%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 15 90% 42%; --sidebar-accent-foreground: 0 0% 100%; --sidebar-border: 25 15% 80%; --sidebar-ring: 25 90% 42%; } /* Warm ambient glow */ .dark.theme-pumpkin body { background: transparent radial-gradient(ellipse 100% 55% at 20% 25%, rgba(200, 80, 0, 0.18) 0%, transparent 55%), radial-gradient(ellipse 80% 45% at 80% 75%, rgba(255, 140, 0, 0.12) 0%, transparent 45%), radial-gradient(ellipse 60% 35% at 50% 50%, rgba(180, 60, 0, 0.08) 0%, transparent 40%); } .dark.theme-pumpkin body > div { background: transparent !important; } .light.theme-pumpkin body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 15% 20%, rgba(200, 80, 0, 0.05) 0%, transparent 55%), radial-gradient(ellipse 70% 45% at 85% 80%, rgba(255, 140, 0, 0.04) 0%, transparent 55%); } /* Pumpkin Spice text glow */ .dark.theme-pumpkin .text-glow { text-shadow: 0 0 10px hsl(25, 95%, 50%), 0 0 30px hsla(25, 95%, 50%, 0.6), 0 0 60px rgba(200, 80, 0, 0.3); } .light.theme-pumpkin .text-glow { text-shadow: 0 0 8px hsl(25, 90%, 42%), 0 0 20px hsla(25, 90%, 42%, 0.4), 0 0 40px rgba(200, 80, 0, 0.15); } /* Gradient headings — warm orange to amber */ .dark.theme-pumpkin h1:not(.text-primary):not(.text-foreground), .dark.theme-pumpkin h2:not(.text-primary):not(.text-foreground), .dark.theme-pumpkin h3:not(.text-primary):not(.text-foreground) { background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(35, 100%, 50%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .light.theme-pumpkin h1:not(.text-primary):not(.text-foreground), .light.theme-pumpkin h2:not(.text-primary):not(.text-foreground), .light.theme-pumpkin h3:not(.text-primary):not(.text-foreground) { background: linear-gradient(135deg, hsl(25, 90%, 40%), hsl(35, 90%, 40%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Links */ .dark.theme-pumpkin a { color: hsl(25, 95%, 55%); } .light.theme-pumpkin a { color: hsl(25, 90%, 40%); } .dark.theme-pumpkin a:hover { color: hsl(35, 100%, 55%); text-shadow: 0 0 8px rgba(255, 140, 0, 0.35); } .light.theme-pumpkin a:hover { color: hsl(35, 90%, 45%); } /* Blockquotes */ .dark.theme-pumpkin blockquote { border-left: 3px solid hsl(25, 95%, 50%); color: hsl(30, 15%, 70%); font-style: italic; } .light.theme-pumpkin blockquote { border-left: 3px solid hsl(25, 90%, 42%); color: hsl(25, 10%, 42%); font-style: italic; } /* Code */ .dark.theme-pumpkin code { color: hsl(25, 95%, 55%); background: rgba(200, 80, 0, 0.1); border: 1px solid rgba(200, 80, 0, 0.15); } .light.theme-pumpkin code { color: hsl(25, 90%, 40%); background: rgba(200, 80, 0, 0.04); border: 1px solid rgba(200, 80, 0, 0.1); } .dark.theme-pumpkin pre { background: rgba(25, 12, 0, 0.9); border: 1px solid rgba(200, 80, 0, 0.1); } .light.theme-pumpkin pre { background: rgba(200, 80, 0, 0.03); border: 1px solid rgba(200, 80, 0, 0.08); } /* HR */ .dark.theme-pumpkin hr { border-color: rgba(200, 80, 0, 0.12); } .light.theme-pumpkin hr { border-color: rgba(200, 80, 0, 0.08); } /* Tables */ .dark.theme-pumpkin table th { color: hsl(25, 95%, 55%); } .light.theme-pumpkin table th { color: hsl(25, 90%, 40%); } .dark.theme-pumpkin table td { border-color: rgba(200, 80, 0, 0.1); } .light.theme-pumpkin table td { border-color: rgba(200, 80, 0, 0.08); } /* Selection */ .dark.theme-pumpkin ::selection { background: rgba(200, 80, 0, 0.2); color: hsl(0, 0%, 100%); } .light.theme-pumpkin ::selection { background: rgba(200, 80, 0, 0.1); color: hsl(0, 0%, 0%); } /* Placeholders */ .dark.theme-pumpkin input::placeholder, .dark.theme-pumpkin textarea::placeholder { color: hsl(25, 10%, 40%); } .light.theme-pumpkin input::placeholder, .light.theme-pumpkin textarea::placeholder { color: hsl(25, 10%, 62%); } /* Page header / stat card / badge */ .dark.theme-pumpkin .page-header-title, .dark.theme-pumpkin .stat-card-value, .dark.theme-pumpkin .badge { color: hsl(25, 95%, 55%); } .light.theme-pumpkin .page-header-title, .light.theme-pumpkin .stat-card-value, .light.theme-pumpkin .badge { color: hsl(25, 90%, 40%); } /* ============================================================ Dashboard stat card pipeline bars — Pumpkin Spice palette ============================================================ */ .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { background: linear-gradient(to right, hsl(25, 95%, 50%), hsl(25, 95%, 65%), hsl(25, 95%, 50%)) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { background: linear-gradient(to right, hsl(35, 100%, 45%), hsl(35, 100%, 60%), hsl(35, 100%, 45%)) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 { background: hsla(25, 95%, 50%, 0.12) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 { background: hsla(35, 100%, 45%, 0.12) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg { color: hsl(25, 95%, 50%) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg { color: hsl(35, 100%, 45%) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 { background: linear-gradient(to right, transparent, hsla(25, 95%, 50%, 0.25), transparent) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 { background: linear-gradient(to right, transparent, hsla(35, 100%, 45%, 0.25), transparent) !important; } .dark.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r { background: linear-gradient(to right, hsl(25, 95%, 50%), hsl(35, 100%, 45%)) !important; } .light.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full { background: linear-gradient(to right, hsl(25, 90%, 42%), hsl(25, 90%, 55%), hsl(25, 90%, 42%)) !important; } .light.theme-pumpkin .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full { background: linear-gradient(to right, hsl(35, 90%, 42%), hsl(35, 90%, 55%), hsl(35, 90%, 42%)) !important; } /* ============================================================ Chart color overrides — Pumpkin Spice palette ============================================================ */ .dark.theme-pumpkin [class*="recharts-"] text, .light.theme-pumpkin [class*="recharts-"] text { fill: hsl(30, 12%, 60%) !important; } /* Donut chart gradient stops */ .dark.theme-pumpkin .recharts-pie-sector:nth-child(1) path, .light.theme-pumpkin .recharts-pie-sector:nth-child(1) path { fill: hsl(25, 95%, 50%) !important; } .dark.theme-pumpkin .recharts-pie-sector:nth-child(2) path, .light.theme-pumpkin .recharts-pie-sector:nth-child(2) path { fill: hsl(35, 100%, 45%) !important; } .dark.theme-pumpkin .recharts-pie-sector:nth-child(3) path, .light.theme-pumpkin .recharts-pie-sector:nth-child(3) path { fill: hsl(15, 100%, 42%) !important; } /* Stat card icon colors */ .dark.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(1) .h-8.w-8, .light.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(1) .h-8.w-8 { background: hsla(25, 95%, 50%, 0.12) !important; color: hsl(25, 95%, 50%) !important; } .dark.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(2) .h-8.w-8, .light.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(2) .h-8.w-8 { background: hsla(35, 100%, 45%, 0.12) !important; color: hsl(35, 100%, 45%) !important; } .dark.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(3) .h-8.w-8, .light.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(3) .h-8.w-8 { background: hsla(15, 100%, 42%, 0.12) !important; color: hsl(15, 100%, 42%) !important; } /* Stat card value colors */ .dark.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(1) .text-2xl, .light.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(1) .text-2xl { color: hsl(25, 95%, 50%) !important; } .dark.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(2) .text-2xl, .light.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(2) .text-2xl { color: hsl(35, 100%, 45%) !important; } .dark.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(3) .text-2xl, .light.theme-pumpkin .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4 > div:nth-child(3) .text-2xl { color: hsl(15, 100%, 42%) !important; } /* Bar chart bar fills */ .dark.theme-pumpkin .recharts-bar-rectangle:nth-child(1) rect, .light.theme-pumpkin .recharts-bar-rectangle:nth-child(1) rect { fill: hsl(25, 95%, 50%) !important; } .dark.theme-pumpkin .recharts-bar-rectangle:nth-child(2) rect, .light.theme-pumpkin .recharts-bar-rectangle:nth-child(2) rect { fill: hsl(35, 100%, 45%) !important; } /* ============================================================ Card gradient accent — subtle pumpkin glow on hover ============================================================ */ .dark.theme-pumpkin .rounded-xl.border.border-border { border-color: hsla(25, 20%, 18%, 0.8) !important; } .dark.theme-pumpkin .rounded-xl.border.border-border:hover { border-color: hsla(25, 95%, 50%, 0.25) !important; } /* Growth word on login page — keep brand blue */ .dark.theme-pumpkin .growth-word, .light.theme-pumpkin .growth-word { -webkit-text-fill-color: #1BB0CE !important; color: #1BB0CE !important; background: none !important; } /* ============================================================ Client Portal Overrides ============================================================ */ .dark.theme-pumpkin .min-h-screen.bg-background { background: transparent !important; } .dark.theme-pumpkin aside.bg-card.border-r.border-border { background: hsl(25, 35%, 4%) !important; border-right-color: hsl(25, 20%, 14%) !important; } .dark.theme-pumpkin aside .text-muted-foreground { color: hsl(30, 10%, 50%) !important; } .dark.theme-pumpkin aside button:hover { background: hsla(25, 95%, 50%, 0.08) !important; color: hsl(0, 0%, 90%) !important; } .dark.theme-pumpkin aside .bg-primary\/10.text-primary { background: hsl(25, 95%, 50%) !important; color: hsl(0, 0%, 100%) !important; box-shadow: 0 0 10px hsla(25, 95%, 50%, 0.3), 0 0 20px hsla(25, 95%, 50%, 0.1); border-color: hsl(25, 95%, 50%) !important; } .dark.theme-pumpkin aside .bg-primary\/10.text-primary svg { color: hsl(0, 0%, 100%) !important; } .dark.theme-pumpkin header.bg-card\/80 { background: hsl(25, 35%, 4%) !important; border-bottom-color: hsl(25, 20%, 14%) !important; } .dark.theme-pumpkin .bg-card { background: hsla(25, 30%, 7%, 0.65) !important; backdrop-filter: blur(10px) !important; border-color: hsla(25, 20%, 16%, 0.35) !important; } .dark.theme-pumpkin .border-border { border-color: hsl(25, 18%, 14%) !important; } .dark.theme-pumpkin .bg-muted { background: hsl(25, 15%, 10%) !important; } .dark.theme-pumpkin .bg-primary { background: hsl(25, 95%, 50%) !important; box-shadow: 0 0 10px hsla(25, 95%, 50%, 0.2); } .dark.theme-pumpkin .bg-primary:hover { background: hsl(25, 95%, 55%) !important; box-shadow: 0 0 15px hsla(25, 95%, 50%, 0.35); } /* Light mode portal */ .light.theme-pumpkin .min-h-screen.bg-background { background: transparent !important; } .light.theme-pumpkin aside.bg-card.border-r.border-border { background: hsl(0, 0%, 100%) !important; border-right-color: hsl(25, 15%, 82%) !important; } .light.theme-pumpkin header.bg-card\/80 { background: hsl(0, 0%, 98%) !important; border-bottom-color: hsl(25, 15%, 82%) !important; } .light.theme-pumpkin .bg-card { background: hsla(0, 0%, 100%, 0.65) !important; backdrop-filter: blur(10px) !important; border-color: hsla(25, 15%, 80%, 0.5) !important; } .light.theme-pumpkin .bg-primary { background: hsl(25, 90%, 42%) !important; } .light.theme-pumpkin .bg-primary:hover { background: hsl(25, 90%, 48%) !important; }