:root {
    /* === Base Theme Colors === */
    --color-primary: #00aaff;
    --color-secondary: #ff00f0;
    --color-accent: #00f0ff;

    /* === Surface & Background === */
    --surface-0: #050510;
    --surface-1: #0a0a1a;
    --surface-2: #12122a;
    --surface-3: #1a1a3a;

    /* === Text Colors === */
    --text-primary: #f8fafc;
    --text-secondary: #d6dce8;
    --text-muted: #aab4cf;
    --text-on-primary: #ffffff;

    /* === Border & Divider === */
    --border-color: rgba(255, 255, 255, 0.08);

    /* === Glass Card === */
    --glass-bg: rgba(10, 10, 30, 0.5);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: rgba(0, 0, 0, 0.2);

    /* === Footer & Solid Sections === */
    --solid-bg: var(--surface-0);

    /* === Star Colors === */
    --star-color: #ffffff;
    --scene-bg: #000000;

    /* === SEARCH COMPONENT (NEW) === */
    --search-bg: var(--glass-bg);
    --search-border: var(--glass-border);
    --search-shadow: rgba(0, 204, 255, 0.4);
    --search-input-bg: rgba(255, 255, 255, 0.05);
    --search-input-text: var(--text-primary);
    --search-btn-bg: var(--color-primary);
    --search-btn-text: var(--text-on-primary);

    /* ai tools cataguries light */

    --category-bg-green: rgba(34,197,94,0.1);  /* default: green-500/10 */
    --category-text-green: #86efac;            /* default: green-300 */

    --category-bg-purple: rgba(139,92,246,0.1); /* example: purple-500/10 */
    --category-text-purple: #d8b4fe;

    --category-bg-blue: rgba(59,130,246,0.1);
    --category-text-blue: #93c5fd;

    --category-bg-yellow: rgba(234,179,8,0.1);
    --category-text-yellow: #fde68a;          

    --category-bg-cyan: rgba(234,179,8,0.1);
    --category-text-cyan: cyan;          
}

nav .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    gap: 1rem !important;
}

nav .logo-link {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
}

nav .logo-icon {
    font-size: 1.5rem !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    flex-shrink: 0 !important;
}

nav .logo-text {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    white-space: nowrap !important;
}

nav .prev-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

nav .prev-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 170, 255, 0.4) !important;
}

@media (min-width: 768px) {
    nav .logo-icon {
        font-size: 1.75rem !important;
    }

    nav .logo-text {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    nav .nav-container {
        padding: 0 0.5rem !important;
    }

    nav .prev-btn {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
    }

    nav .prev-btn span {
        display: none !important;
    }

    nav .logo-text {
        font-size: 1.1rem !important;
    }

    nav .logo-icon {
        font-size: 1.3rem !important;
    }
}

/* 🌞 Light Mode Overrides */
.light-mode {
    --surface-0: #f8fafc;
    --surface-1: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-on-primary: #ffffff;

    --border-color: #e2e8f0;

    --glass-bg: #ffffff;
    --glass-border: #e2e8f0;
    --glass-shadow: rgba(0, 0, 0, 0.08);

    --solid-bg: var(--surface-0);
    --star-color: #1e293b;
    --scene-bg: #ffffff;

    /* === SEARCH (LIGHT MODE) === */
    --search-bg: #ffffff;
    --search-border: #e2e8f0;
    --search-shadow: rgba(0, 0, 0, 0.25);
    --search-input-bg: #ffffff;
    --search-input-text: var(--text-primary);
    --search-btn-bg: var(--color-primary);
    --search-btn-text: #ffffff;

    /* ai tools cataguries light*/
    --category-bg-green: rgba(0,0,0,0.05);   /* subtle gray for visibility */
    --category-text-green: #000000;          /* black text in light mode */

    --category-bg-purple: rgba(0,0,0,0.05);
    --category-text-purple: #000000;

    --category-bg-blue: rgba(0,0,0,0.05);
    --category-text-blue: #000000;

    --category-bg-yellow: rgba(0,0,0,0.05);
    --category-text-yellow: #000000;

    --category-bg-cyan: rgba(0,0,0,0.05);
    --category-text-cyan: #000000;
}

/* Shared component text readability in dark-mode only */
.text-on-primary {
    color: var(--text-on-primary) !important;
}

html:not(.light-mode) .nav-menu a,
html:not(.light-mode) .nav-menu button,
html:not(.light-mode) .nav-menu span,
html:not(.light-mode) .mobile-menu a,
html:not(.light-mode) .mobile-menu button,
html:not(.light-mode) .mobile-menu span,
html:not(.light-mode) .footer-link,
html:not(.light-mode) .footer-section-title,
html:not(.light-mode) .footer-description,
html:not(.light-mode) .footer-list a,
html:not(.light-mode) .legal-link,
html:not(.light-mode) .copyright,
html:not(.light-mode) .copyright p,
html:not(.light-mode) .featured-card a,
html:not(.light-mode) .featured-card button,
html:not(.light-mode) .featured-card .text-primary,
html:not(.light-mode) .featured-card .text-secondary,
html:not(.light-mode) .featured-card .text-muted,
html:not(.light-mode) .btn,
html:not(.light-mode) .btn-primary,
html:not(.light-mode) .btn-secondary,
html:not(.light-mode) .copy-btn,
html:not(.light-mode) .page-menu-button {
    color: var(--text-primary) !important;
}