/* ============================================
   IMAGE TOOLS - STYLES (FIXED VISIBILITY)
   ============================================
*/

/* === 1. THEME VARIABLES & BACKGROUND === */
:root {
    --brand-primary: #10b981;   /* Emerald 500 */
    --brand-secondary: #14b8a6; /* Teal 500 */
    --card-border-light: #cbd5e1;
    --card-border-dark: #334155;
    --bg-light: #f8fafc;       /* Slate 50 */
    --bg-dark: #0f172a;        /* Slate 900 */
}

/* FORCE Light Background by default */
body {
    background-color: var(--bg-light) !important;
    color: #0f172a;
}

/* FORCE Dark Background only when .dark class is present */
body.dark {
    background-color: var(--bg-dark) !important;
    color: #f8fafc;
}

/* === BACKGROUND PATTERN FIX === */
/* Uses dark dots for light mode, white dots for dark mode */
.bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Light Mode Pattern: Dark Gray Dots */
    background-image: radial-gradient(#94a3b8 1px, transparent 1px); 
    background-size: 24px 24px;
    opacity: 0.25; /* Subtle visibility */
    pointer-events: none;
}

/* Dark Mode Pattern Override: White Dots */
body.dark .bg-pattern {
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    opacity: 0.15;
}

/* === 2. HEADER TYPOGRAPHY FIXES (CRITICAL) === */

/* Force Main Title to be BLACK in Light Mode */
main h1 {
    color: #111827 !important; /* Deep Black/Gray */
}

/* Force Subtitle to be Dark Gray in Light Mode */
main h2 {
    color: #475569 !important; /* Slate 600 - Readable Dark Gray */
}

/* Dark Mode Overrides for Text */
body.dark main h1 {
    color: #ffffff !important;
}
body.dark main h2 {
    color: #cbd5e1 !important; /* Light Gray */
}

/* Ensure the "Hub" gradient text stays colorful */
main h1 span {
    color: transparent !important;
    background-clip: text;
    -webkit-background-clip: text;
    /* Gradient is applied via Tailwind utility classes in HTML */
}

/* Animations */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

/* === 3. CARD STYLING === */
.tool-card {
    background: #ffffff;
    border: 1px solid var(--card-border-light);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}

/* Dark Mode Card */
body.dark .tool-card {
    background: #1e293b; /* Slate 800 */
    border-color: var(--card-border-dark);
    box-shadow: none;
}

/* Hover Effects */
.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.15); /* Greenish shadow */
    border-color: var(--brand-primary);
}

/* Icon Container */
.tool-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.tool-card:hover .tool-icon {
    transform: scale(1.1) rotate(3deg);
}

/* Typography within Card */
.tool-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #0f172a; /* Slate 900 */
}
body.dark .tool-card h3 {
    color: #f8fafc; /* Slate 50 */
}

.tool-card p {
    font-size: 0.925rem;
    color: #475569; /* Slate 600 */
    margin-bottom: 1.5rem;
    flex-grow: 1;
    line-height: 1.5;
}
body.dark .tool-card p {
    color: #94a3b8; /* Slate 400 */
}

/* Action Text */
.action-text {
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.tool-card:hover .action-text {
    transform: translateX(4px);
}

/* === 4. RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    .tool-card {
        padding: 1.5rem;
    }
}