@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    :root,
    [data-color="default"] {
        /* Default - Dark Gold (Synced with Static Site) */
        --bg-primary: 10 15 26;
        --bg-secondary: 17 24 39;
        --card-bg: rgb(var(--bg-secondary) / 0.6);
        --navbar-bg: rgb(var(--bg-primary) / 0.7);
        --text-primary: #ffffff;
        --text-muted: #94a3b8;
        --accent: 212 175 55;
        --accent-hover: 181 149 47;
        --border-color: rgb(255 255 255 / 0.05);
        --glass-bg: rgb(var(--bg-secondary) / 0.6);
        --glass-border: rgb(255 255 255 / 0.05);
        --glow-color: rgb(var(--accent) / 0.3);
        --logo-filter-default: brightness(1) invert(0);
        --logo-filter-hover: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    [data-color="default-light"] {
        /* Default - Light Gold */
        --bg-primary: 250 250 250;
        --bg-secondary: 255 255 255;
        --card-bg: rgb(255 255 255 / 0.9);
        --navbar-bg: rgb(250 250 250 / 0.95);
        --text-primary: #1a202c;
        --text-muted: #4a5568;
        --accent: 212 175 55;
        --accent-hover: 181 149 47;
        --border-color: rgb(0 0 0 / 0.08);
        --glass-bg: rgb(255 255 255 / 0.85);
        --glass-border: rgb(0 0 0 / 0.12);
        --glow-color: rgb(212 175 55 / 0.08);
        --logo-filter-default: brightness(1);
        --logo-filter-hover: brightness(0) drop-shadow(0 0 15px rgba(0, 0, 0, 0.1));
    }

    [data-color="one-dark-pro"] {
        --bg-primary: 40 44 52;
        --bg-secondary: 33 37 43;
        --card-bg: rgb(33 37 43 / 0.7);
        --navbar-bg: rgb(40 44 52 / 0.8);
        --text-primary: #abb2bf;
        --text-muted: #5c6370;
        --accent: 97 175 239;
        --accent-hover: 82 147 202;
        --border-color: rgb(255 255 255 / 0.05);
        --glass-bg: rgb(33 37 43 / 0.6);
        --glow-color: rgb(97 175 239 / 0.15);
        --logo-filter-default: brightness(1) invert(0);
        --logo-filter-hover: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    [data-color="dracula-official"] {
        --bg-primary: 40 42 54;
        --bg-secondary: 68 71 90;
        --card-bg: rgb(68 71 90 / 0.7);
        --navbar-bg: rgb(40 42 54 / 0.8);
        --text-primary: #f8f8f2;
        --text-muted: #6272a4;
        --accent: 189 147 249;
        --accent-hover: 163 126 224;
        --border-color: rgb(255 255 255 / 0.05);
        --glass-bg: rgb(68 71 90 / 0.6);
        --glow-color: rgb(189 147 249 / 0.15);
        --logo-filter-default: brightness(1) invert(0);
        --logo-filter-hover: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    [data-color="night-owl"] {
        --bg-primary: 1 22 39;
        --bg-secondary: 11 41 66;
        --card-bg: rgb(11 41 66 / 0.7);
        --navbar-bg: rgb(1 22 39 / 0.8);
        --text-primary: #d6deeb;
        --text-muted: #5f7e97;
        --accent: 130 170 255;
        --accent-hover: 108 143 214;
        --border-color: rgb(255 255 255 / 0.05);
        --glass-bg: rgb(11 41 66 / 0.6);
        --glow-color: rgb(130 170 255 / 0.15);
        --logo-filter-default: brightness(1) invert(0);
        --logo-filter-hover: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    [data-color="material-theme"] {
        --bg-primary: 15 17 26;
        --bg-secondary: 30 33 50;
        --card-bg: rgb(30 33 50 / 0.7);
        --navbar-bg: rgb(15 17 26 / 0.8);
        --text-primary: #eeffff;
        --text-muted: #546e7a;
        --accent: 128 203 196;
        --accent-hover: 106 176 170;
        --border-color: rgb(255 255 255 / 0.05);
        --glass-bg: rgb(30 33 50 / 0.6);
        --glow-color: rgb(128 203 196 / 0.15);
        --logo-filter-default: brightness(1) invert(0);
        --logo-filter-hover: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    [data-color="tokyo-night"] {
        --bg-primary: 26 27 38;
        --bg-secondary: 36 40 59;
        --card-bg: rgb(36 40 59 / 0.7);
        --navbar-bg: rgb(26 27 38 / 0.8);
        --text-primary: #a9b1d6;
        --text-muted: #565f89;
        --accent: 122 162 247;
        --accent-hover: 102 136 207;
        --border-color: rgb(255 255 255 / 0.05);
        --glass-bg: rgb(36 40 59 / 0.6);
        --glow-color: rgb(122 162 247 / 0.15);
        --logo-filter-default: brightness(1) invert(0);
        --logo-filter-hover: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    [data-color="material-light"] {
        --bg-primary: 250 250 250;
        --bg-secondary: 255 255 255;
        --card-bg: rgb(255 255 255 / 0.9);
        --navbar-bg: rgb(250 250 250 / 0.95);
        --text-primary: #1a202c;
        --text-muted: #4a5568;
        --accent: 0 121 107;
        --accent-hover: 0 77 64;
        --border-color: rgb(0 0 0 / 0.08);
        --glass-bg: rgb(255 255 255 / 0.85);
        --glass-border: rgb(0 0 0 / 0.12);
        --glow-color: rgb(0 121 107 / 0.08);
        --logo-filter-default: brightness(1);
        --logo-filter-hover: brightness(0) drop-shadow(0 0 15px rgba(0, 0, 0, 0.1));
    }

    [data-color="tokyo-night-light"] {
        --bg-primary: 213 214 219;
        --bg-secondary: 203 204 209;
        --card-bg: rgb(203 204 209 / 0.9);
        --navbar-bg: rgb(213 214 219 / 0.95);
        --text-primary: #2e3347;
        --text-muted: #4b526d;
        --accent: 52 84 138;
        --accent-hover: 33 53 90;
        --border-color: rgb(0 0 0 / 0.1);
        --glass-bg: rgb(203 204 209 / 0.85);
        --glass-border: rgb(0 0 0 / 0.15);
        --glow-color: rgb(52 84 138 / 0.08);
        --logo-filter-default: brightness(1);
        --logo-filter-hover: brightness(0) drop-shadow(0 0 15px rgba(0, 0, 0, 0.1));
    }
}

.glass-nav {
    background: var(--navbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.input-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.input-glass:focus {
    border-color: rgb(var(--accent));
    outline: none;
    box-shadow: 0 0 0 1px rgb(var(--accent) / 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.text-gradient {
    background: linear-gradient(to right, rgb(var(--accent)), rgb(var(--accent-hover)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glow-button {
    box-shadow: 0 0 15px var(--glow-color);
}

.glow-button:hover {
    box-shadow: 0 0 25px var(--glow-color);
}

.theme-logo {
    filter: var(--logo-filter-default);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Animations and Utilities from Static Site */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.bg-hero-glow {
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent), 0.15) 0%, transparent 50%);
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}