/* ========================================
   REUSABLE COMPONENTS
   Tamide Data Solutions
   ======================================== */

/* =================
   GRADIENTS
   ================= */

.hero-gradient {
    background: linear-gradient(135deg,
            hsl(174, 100%, 12%) 0%,
            hsl(174, 100%, 15%) 25%,
            hsl(174, 80%, 18%) 50%,
            hsl(174, 70%, 22%) 75%,
            hsl(174, 60%, 28%) 100%);
}

.overlay-gradient-1 {
    background: radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
}

.overlay-gradient-2 {
    background: radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 60%);
}

/* =================
   PARTICLES
   ================= */

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    pointer-events: none;
}

/* =================
   DARK MODE TOGGLE BUTTON
   ================= */

#dark-mode-toggle {
    position: fixed;
    top: 100px;
    right: 30px;
    background: linear-gradient(135deg, #004d40, #00695c);
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

#dark-mode-toggle:hover {
    background: linear-gradient(135deg, #00695c, #00897b);
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode #dark-mode-toggle {
    background: #00FF88;
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode #dark-mode-toggle:hover {
    background: #00FF88;
    transform: scale(1.15) rotate(-15deg);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6),
        0 12px 30px rgba(0, 0, 0, 0.6);
}

/* =================
   LOGO STYLES
   ================= */

img[src*="Logo_TAMIDE.png"] {
    background: #ffffffa1;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}