/*
 * theme.css  –  HASH marketing shared stylesheet
 * ─────────────────────────────────────────────────
 * Include on EVERY page:
 *   <link rel="stylesheet" href="theme.css">
 *
 * Covers:
 *   1. Base / typography
 *   2. Accent colour tokens
 *   3. Accessibility (focus-visible)
 *   4. Light-theme overrides  [data-theme="light"]
 *   5. Services section glow + circuit overlay
 *   6. Body transition for smooth theme switching
 */


/* ── 1. Base ─────────────────────────────────────── */
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #1a1a1a;
    color: #f3f4f6;
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* ── 2. Accent colour tokens ─────────────────────── */
/* Use these utility classes anywhere instead of hard-coding #3fe0b5 */
.text-accent   { color: #3fe0b5; }
.bg-accent     { background-color: #3fe0b5; }
.border-accent { border-color: #3fe0b5; }

.hover-bg-accent:hover {
    background-color: #3fe0b5;
    color: #1a1a1a;
    transition: all 0.3s ease;
}


/* ── 3. Accessibility ────────────────────────────── */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #3fe0b5;
    outline-offset: 3px;
    border-radius: 4px;
}


/* ── 4. Light-theme overrides ────────────────────── */
body[data-theme="light"] {
    background-color: #f8fafc;
    color: #0f172a;
}

body[data-theme="light"] nav,
body[data-theme="light"] footer {
    border-color: #e5e7eb !important;
}

body[data-theme="light"] #services {
    background-color: #eff6f5;
}

body[data-theme="light"] #about {
    background-color: #ffffff !important;
}

body[data-theme="light"] #contact {
    background-color: #f8fafc;
}

body[data-theme="light"] #glow {
    opacity: 0.12;
}

body[data-theme="light"] #circuit-overlay {
    background-image: url('resources/LinijePozadinaLight.svg');
}

body[data-theme="light"] .bg-\[\#1a1a1a\],
body[data-theme="light"] .bg-\[\#121212\] {
    background-color: #ffffff !important;
}

body[data-theme="light"] .bg-\[\#121212\]\/90 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="light"] .border-gray-800 {
    border-color: #d1d5db !important;
}

body[data-theme="light"] .border-gray-700 {
    border-color: #cbd5e1 !important;
}

body[data-theme="light"] .text-gray-400 {
    color: #1d2329 !important;
    font-weight: bold;
}

body[data-theme="light"] .text-white {
    color: #0f172a !important;
}

body[data-theme="light"] .mix-blend-multiply {
    mix-blend-mode: normal;
    opacity: 0.75;
}

body[data-theme="light"] .brightness-\[0\.25\] {
    filter: brightness(0.82) saturate(0.85) !important;
}

body[data-theme="light"] .grayscale {
    filter: grayscale(1) brightness(0.85) !important;
}

body[data-theme="light"] .shadow-lg,
body[data-theme="light"] .shadow-\[0_0_10px_rgba\(63\2C 224\2C 181\2C 0\.1\)\],
body[data-theme="light"] .shadow-\[0_0_15px_rgba\(63\2C 224\2C 181\2C 0\.5\)\],
body[data-theme="light"] .shadow-\[0_0_20px_rgba\(63\2C 224\2C 181\2C 0\.3\)\],
body[data-theme="light"] .shadow-\[0_0_30px_rgba\(63\2C 224\2C 181\2C 0\.5\)\] {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}

body[data-theme="light"] .hover\:text-accent:hover {
    color: #1aa98a !important;
    font-weight: bold;
}

body[data-theme="light"] .hover\:border-\[\#3fe0b5\]:hover {
    border-color: #3fe0b5 !important;
}


/* ── 5. Services section: glow + circuit overlay ─── */
/*
 * Only needed on pages that include the #services section.
 * Safe to keep here for all pages – selectors won't match if the
 * element is absent.
 */

#services {
    position: relative;
    overflow: hidden;
    background-color: #121212;
}

/* Layer 1 – mouse-tracking radial glow (below SVG lines) */
#glow {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 50%, #3fe0b5 0%, rgba(63, 224, 181, 0) 40%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

#services:hover #glow {
    opacity: 0.25;
}

/* Mobile: replace mouse-tracking with looping animation */
@media (max-width: 768px) {
    #glow {
        opacity: 0.25 !important;
        background-image: radial-gradient(circle, #3fe0b5 0%, rgba(63, 224, 181, 0) 50%) !important;
        background-size: 260vw 260vw !important;
        background-repeat: no-repeat !important;
        animation: glowMobileScroll 4.5s infinite alternate ease-in-out;
    }

    @keyframes glowMobileScroll {
        0%   { background-position: center -20%; }
        100% { background-position: center 120%; }
    }
}

/* Layer 2 – SVG circuit lines (above glow) */
#circuit-overlay {
    position: absolute;
    inset: 0;
    background-image: url('resources/LinijePozadina.svg');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

/* Layer 3 – content (always on top) */
#services > .max-w-7xl {
    position: relative;
    z-index: 10;
}