/* ==========================================================================
   PUR Resume Screening — Custom Styles
   Matches AP Invoice Automation design system.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    /* Background */
    --color-bg: #FFFFFF;
    --color-surface: #F9FAFB;
    --color-border: #E5E7EB;

    /* Text */
    --color-text: #111827;
    --color-secondary: #6B7280;
    --color-muted: #9CA3AF;

    /* Accent */
    --color-accent: #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-accent-bg: #EFF6FF;

    /* Semantic */
    --color-success: #059669;
    --color-success-bg: #ECFDF5;
    --color-warning: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-danger: #DC2626;
    --color-danger-bg: #FEF2F2;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}


/* ---------- Nav item transitions ---------- */
.nav-item {
    transition: color 0.15s ease, border-color 0.15s ease;
}


/* ---------- Table row transitions ---------- */
tbody tr {
    transition: background-color 0.1s ease;
}


/* ---------- Focus ring ---------- */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.focus\:ring-2:focus {
    outline: none;
}


/* ---------- Flash banners ---------- */
.flash-banner {
    animation: flash-in 0.2s ease-out;
}

.flash-banner.flash-out {
    animation: flash-out 0.3s ease-in forwards;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes flash-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}


/* ---------- Utility: smooth transitions ---------- */
.transition-fast {
    transition: all 0.15s ease;
}

.transition-normal {
    transition: all 0.2s ease;
}


/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}


/* ---------- Score display ---------- */
.score-pill {
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}