@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============ RESET & BASE ============ */
:root {
    --primary: #4f46e5;
    /* Indigo 600 */
    --primary-hover: #4338ca;
    /* Indigo 700 */
    --secondary: #64748b;
    /* Slate 500 */
    --bg-page: #f8fafc;
    /* Slate 50 */
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    /* Slate 200 */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-page);
    color: #0f172a;
    /* Slate 900 */
    -webkit-font-smoothing: antialiased;
}

/* ============ CUSTOM SCROLLBAR ============ */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    /* Slate 300 */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
    /* Slate 400 */
}

/* Hide scrollbar for clean UI but allow scroll */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

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

/* ============ INPUT STYLES ============ */
.input-base {
    @apply w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm text-slate-700 placeholder-slate-400 transition-all duration-200;
    outline: none;
}

.input-base:focus {
    @apply border-indigo-500 ring-4 ring-indigo-500/10;
}

.input-base:hover:not(:focus) {
    @apply border-slate-300;
}

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scaleIn {
    animation: scaleIn 0.3s ease-out forwards;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
    border-radius: 50%;
}

/* ============ COMPONENT STYLES ============ */

/* Tabs */
.tab-btn {
    position: relative;
}

/* Active tab indicator handled via class in JS, but we can add a subtle transition */
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.tab-btn.tab-active::after {
    background-color: #4f46e5;
}

.tab-btn.tab-active {
    color: #4f46e5;
    background-color: #eef2ff;
    /* Indigo 50 */
}

/* Resume Preview Page Shadow */
#resumePreview {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Print Overrides */
@media print {
    @page {
        margin: 0;
        size: auto;
    }

    body {
        background: white;
    }

    .no-print {
        display: none !important;
    }

    #resumePreview {
        box-shadow: none;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }
}