/* ================================================
   GENIUS QUICKTOOLS — OFFICIAL PALETTE.CSS
   Burgundy space theme + FULL support for ALL tools
   ================================================ */

:root {
    /* === YOUR EXACT PALETTE === */
    --primary-cyan: #0086c9;        /* Sky Blue Sword - main accents, borders, glows */
    --accent-violet: #ff5500;       /* Fire Orange */
    --accent-amber: #ff5500;
    --text-light: #81aabe;          /* Silver-Cloud Sword - headlines */
    --text-secondary: #e08700;      /* Yellow-Gold - body text */
    --text-cyan: #e08700;
    --orb-start: #e0e0e0;
    --orb-middle: #81aabe;
    --orb-end: #e0e0e0;
    --button-secondary-bg: #e0e0e0;
    --glow-intensity: 40px;
    --card-bg: rgba(255,255,255,0.09);

    /* Logo paths */
    --logo-ball: #22d3ee;
    --logo-I: #e08700;
    --logo-G: #050402;
    --logo-L: #ff5500;

    /* === GENIUS MENU ORBS === */
    --center-orb-from: #210700;
    --center-orb-via: #0086c9;
    --center-orb-to: #ff5500;
    --mindmap-live-from: #0086c9;
    --mindmap-live-to: #ff5500;
    --mindmap-coming-from: #210700;
    --mindmap-coming-to: #3a1a0a;

    /* === NEW TOOL-SPECIFIC COLORS === */
    --accent-emerald: #34d399;      /* Success buttons, premium badges */
    --accent-rose: #f43f5e;         /* Negative/avoid text */
    --accent-indigo: #6366f1;       /* Wizard progress & links */
    --badge-premium-bg: #10b981;
    --badge-premium-text: #000;
    --progress-fill-from: #6366f1;
    --progress-fill-to: #22d3ee;
    --checkbox-accent: #0086c9;
    --input-bg: rgba(255,255,255,0.10);
    --input-border: #0086c9;
    --link-indigo: #a78bfa;
}

html { scroll-behavior: smooth; }
body { 
    margin: 0; 
    background: #000000; 
    font-family: system-ui, -apple-system, sans-serif; 
}
#three-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* === CORE OVERRIDES === */
.hero-glow { text-shadow: 0 0 var(--glow-intensity) var(--primary-cyan), 0 0 calc(var(--glow-intensity) * 2) var(--primary-cyan) !important; }
h1, h2, h3, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl { color: var(--text-light) !important; }
.text-secondary, .text-gray-300, .text-gray-400, .text-white\/70, .text-white\/80 { color: var(--text-secondary) !important; }
.text-cyan-100, .text-cyan-200, .text-cyan-300, .text-cyan-400, .text-cyan-500 { color: var(--text-cyan) !important; }
.text-amber-400, .text-amber-500, .text-amber-300 { color: var(--accent-amber) !important; }

/* Cards & buttons */
.bg-white\/5, .bg-white\\/5, .bg-white\/10, .bg-black\/70, .bg-black\/60 { background: var(--card-bg) !important; }
.border-cyan-400, .border-cyan-300, .border-cyan-500, .border-white\/10 { border-color: var(--primary-cyan) !important; }
.bg-cyan-500, .bg-cyan-400, .hover\:bg-cyan-400:hover { background-color: var(--primary-cyan) !important; color: #000 !important; }
.bg-white, .hover\:bg-white:hover { background-color: var(--button-secondary-bg) !important; color: #000 !important; }

/* Plasma orb + Genius Menu */
.plasma-orb { background: linear-gradient(to bottom right, var(--orb-start), var(--orb-middle), var(--orb-end)) !important; animation: plasma-pulse 3s ease-in-out infinite; }
@keyframes plasma-pulse { 0%,100% { box-shadow: 0 0 25px var(--primary-cyan), 0 0 50px var(--accent-violet); } 50% { box-shadow: 0 0 45px var(--accent-violet), 0 0 80px var(--primary-cyan); } }
#center-orb { background: linear-gradient(to bottom right, var(--center-orb-from), var(--center-orb-via), var(--center-orb-to)) !important; box-shadow: 0 0 60px 20px var(--primary-cyan) !important; }
.mindmap-node { opacity: 0; transform: scale(0); transition: all 0.4s cubic-bezier(0.68,-0.55,0.27,1.55); }
.mindmap-node.pop-in { opacity: 1; transform: scale(1); }
.mindmap-node:hover { box-shadow: 0 0 45px 12px var(--primary-cyan), 0 0 60px 20px var(--accent-violet) !important; }
.mindmap-node:not(.opacity-40) { background: linear-gradient(to bottom right, var(--mindmap-live-from), var(--mindmap-live-to)) !important; }
.mindmap-node.opacity-40 { background: linear-gradient(to bottom right, var(--mindmap-coming-from), var(--mindmap-coming-to)) !important; }

/* === TOOL-SPECIFIC FIXES === */

/* Shopping List */
.text-cyan-500 { color: var(--primary-cyan) !important; }
.bg-emerald-400, .hover\:bg-emerald-300:hover { background-color: var(--accent-emerald) !important; color: #000 !important; }
.bg-amber-400, .hover\:bg-amber-300:hover { background-color: var(--accent-amber) !important; color: #000 !important; }

/* Base nav - User badge & icon */
.bg-emerald-400 { background-color: var(--accent-emerald) !important; color: #000 !important; }
.text-cyan-400, .text-cyan-300 { color: var(--primary-cyan) !important; }

/* Tip page - Crypto button */
.from-purple-500, .to-cyan-500, .hover\:from-purple-600, .hover\:to-cyan-600 {
    background: linear-gradient(to right, #a78bfa, var(--primary-cyan)) !important;
}

/* Whats For Dinner */
.text-rose-400 { color: var(--accent-rose) !important; }
.bg-emerald-400 { background-color: var(--accent-emerald) !important; color: #000 !important; }
.accent-cyan-400 { accent-color: var(--checkbox-accent) !important; }
.border-cyan-400\/30, .border-cyan-400\/50 { border-color: rgba(0,134,201,0.3) !important; }
.bg-amber-400\/10, .border-amber-400\/30 { border-color: rgba(255,85,0,0.3) !important; }
.text-amber-300 { color: var(--accent-amber) !important; }

/* Recipe Submission Wizard */
#progress-fill {
    background: linear-gradient(to right, var(--progress-fill-from), var(--progress-fill-to)) !important;
}
.from-indigo-500, .to-cyan-400, .hover\:from-indigo-600, .hover\:to-cyan-500 {
    background: linear-gradient(to right, var(--accent-indigo), var(--primary-cyan)) !important;
}

/* Community Recipes */
.bg-white\/10, .border-cyan-400\/30 { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
.focus\:border-cyan-400:focus { border-color: var(--primary-cyan) !important; }

/* Weekly Planner */
.text-indigo-400, .hover\:text-indigo-300 { color: var(--accent-indigo) !important; }
.text-cyan-300 { color: var(--text-cyan) !important; }
.border-cyan-400\/30 { border-color: rgba(0,134,201,0.3) !important; }

/* === PAYMENTS + DASHBOARD FIXES === */
.bg-emerald-400, .bg-emerald-500, .hover\:bg-emerald-400:hover, .hover\:bg-emerald-300:hover { background-color: var(--accent-emerald) !important; color: #000 !important; }
.text-emerald-300, .text-emerald-400 { color: var(--accent-emerald) !important; }
.border-emerald-400 { border-color: var(--accent-emerald) !important; }

.bg-red-400\/10, .bg-red-400, .bg-red-500, .hover\:bg-red-400:hover, .hover\:bg-red-600:hover { background: rgba(244,63,94,0.1) !important; }
.text-red-300, .text-red-400 { color: var(--accent-red) !important; }
.border-red-400 { border-color: var(--accent-red) !important; }

.text-purple-400, .text-purple-300, .border-purple-400, .border-purple-400\/50, .border-purple-400\/30 { color: var(--accent-purple) !important; border-color: var(--accent-purple) !important; }

.text-sky-400, .border-sky-400 { color: var(--accent-sky) !important; border-color: var(--accent-sky) !important; }
.text-lime-400, .border-lime-400 { color: var(--accent-lime) !important; border-color: var(--accent-lime) !important; }
.text-rose-400, .border-rose-400 { color: var(--accent-rose) !important; border-color: var(--accent-rose) !important; }

/* Amber warnings (checkout) */
.bg-amber-400\/10, .border-amber-400 { background: rgba(255,85,0,0.1) !important; border-color: var(--accent-amber) !important; }

/* Checkboxes, progress, inputs */
.accent-cyan-400 { accent-color: var(--checkbox-accent) !important; }
#progress-fill { background: linear-gradient(to right, var(--progress-from), var(--progress-to)) !important; }
.bg-white\/10, .border-white\/20, .border-cyan-400\/30 { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
.focus\:border-cyan-400:focus { border-color: var(--primary-cyan) !important; }

/* SVG logo paths */
#path1 { fill: var(--logo-L) !important; stroke: var(--logo-L) !important; }
#path2 { fill: var(--logo-G) !important; stroke: var(--logo-G) !important; }
#path3 { fill: var(--logo-I) !important; stroke: var(--logo-I) !important; }
#path4 { fill: var(--logo-ball) !important; stroke: var(--logo-ball) !important; }



/* ================================================
   INDEX.HTML CARD HOVER EFFECTS — FINAL VERSION
   Now Available = fire orange (#ff5500) highlight
   Coming Soon   = clearly greyed-out / inactive look
   ================================================ */

#tools .grid > div {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==================== NOW AVAILABLE CARDS ==================== */
#tools .grid > div.border.border-cyan-400.rounded-3xl.p-8 {
    border-color: var(--primary-cyan) !important;
}

/* Hover: Fire Orange (#ff5500) border + strong glow */
#tools .grid > div.border.border-cyan-400.rounded-3xl.p-8:hover {
    border-color: #ff5500 !important;
    transform: translateY(-8px) scale(1.04) !important;
    box-shadow: 0 20px 25px -5px rgb(255 85 0 / 0.4),
                0 0 0 2px rgb(255 85 0 / 0.3) !important;
}

/* ==================== COMING SOON CARDS ==================== */
#tools .grid > div.border.border-white\/10.rounded-3xl.p-8 {
    opacity: 0.65 !important;
    filter: grayscale(0.6) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Very subtle hover for Coming Soon (no strong lift) */
#tools .grid > div.border.border-white\/10.rounded-3xl.p-8:hover {
    opacity: 0.85 !important;
    filter: grayscale(0.3) !important;
    transform: translateY(-3px) scale(1.02) !important;
    border-color: #ff5500 !important;
    box-shadow: 0 10px 15px -5px rgb(255 85 0 / 0.2) !important;
}