/* Tailwind directives removed (using CDN) */

/* Box Modern Style - Light, Clean, Orange Accent */
:root {
    --bg-color: #F8F9FA;
    --text-primary: #333333;
    --text-secondary: #666666;
    --card-bg: #FFFFFF;
    --card-footer: #F5F7F9;
    /* Light gray footer for card */
    --accent-color: #FF5722;
    /* Deep Orange */
    --border-color: #E0E0E0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Panel / Card Style */
.unity-panel {
    background-color: var(--unity-panel);
    border: 1px solid var(--unity-border);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
}

.unity-panel:hover {
    border-color: #4C4D52;
    transform: translateY(-2px);
    background-color: var(--unity-panel-light);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--unity-text-light);
    font-family: 'Poppins', sans-serif;
}

/* Buttons */
.btn-unity {
    background-color: #38393D;
    color: #E0E0E0;
    border: 1px solid #18191C;
    border-radius: 3px;
    padding: 8px 16px;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-unity:hover {
    background-color: #45464A;
    color: #FFF;
}

.btn-unity-primary {
    background-color: var(--unity-accent);
    color: white;
    border: 1px solid transparent;
}

.btn-unity-primary:hover {
    background-color: #1976D2;
}

/* Inputs */
input[type="text"],
textarea,
select {
    background-color: #18191c;
    border: 1px solid #38393D;
    color: #E0E0E0;
    border-radius: 3px;
    padding: 10px;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    border-color: var(--unity-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* Tool Card Specifics */
.tool-icon-box {
    background: linear-gradient(180deg, #323337 0%, #2A2B2E 100%);
    border-bottom: 1px solid var(--unity-border);
}

.tool-title-bar {
    background-color: #252629;
    border-top: 1px solid var(--unity-border);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #202124;
}

::-webkit-scrollbar-thumb {
    background-color: #424242;
    border-radius: 5px;
    border: 2px solid #202124;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #616161;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Header Animations */
@keyframes gradient-x {
    0%, 100% {
        background-size: 200% 200%;
        background-position: left center;
    }
    50% {
        background-size: 200% 200%;
        background-position: right center;
    }
}

.animate-gradient-x {
    animation: gradient-x 3s ease infinite;
}

@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}