/*
 * Unfold Custom CSS — Variables & Tokens
 * Color variables, status badges, dark mode overrides
 */

:root {
    /* Primary Green */
    --primary-50: rgb(240, 253, 244);
    --primary-100: rgb(220, 252, 231);
    --primary-200: rgb(187, 247, 208);
    --primary-300: rgb(134, 239, 172);
    --primary-400: rgb(74, 222, 128);
    --primary-500: rgb(34, 197, 94);
    --primary-600: rgb(22, 163, 74);
    --primary-700: rgb(21, 128, 61);
    --primary-800: rgb(22, 101, 52);
    --primary-900: rgb(20, 83, 45);

    /* Approved status - green */
    --approved-color: rgb(34, 197, 94);
    --approved-bg: rgb(240, 253, 244);

    /* Pending status - orange */
    --pending-color: rgb(255, 165, 0);
    --pending-bg: rgb(255, 247, 237);

    /* Rejected status - gray */
    --rejected-color: rgb(102, 102, 102);
    --rejected-bg: rgb(245, 245, 245);
}

/* Dark mode variable overrides */
.dark {
    --primary-500: rgb(0, 255, 0);
    --approved-color: rgb(0, 255, 0);
    --approved-bg: rgba(0, 255, 0, 0.1);
    --pending-color: rgb(255, 165, 0);
    --pending-bg: rgba(255, 165, 0, 0.1);
    --rejected-color: rgb(128, 128, 128);
    --rejected-bg: rgba(128, 128, 128, 0.1);
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-approved {
    background-color: var(--approved-bg);
    color: var(--approved-color);
}

.status-pending {
    background-color: var(--pending-bg);
    color: var(--pending-color);
}

.status-rejected {
    background-color: var(--rejected-bg);
    color: var(--rejected-color);
}