@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --brand-primary: #0E85E8;
    --brand-primary-dark: #0b6bc0;
    --brand-primary-light: #E0F0FE;
    --brand-bg: #F8FAFC;
    --brand-dark: #0F172A;
    --brand-slate: #64748B;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: var(--brand-bg);
    color: var(--brand-dark);
    -webkit-font-smoothing: antialiased;
}

.font-display {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

.font-mono-receipt {
    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Modal animation */
.modal-enter {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1), transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-exit {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.modal-exit-active {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
    transition: opacity 100ms ease-in, transform 100ms ease-in;
}

/* Category Pill Active State */
.cat-pill.active {
    background-color: #0E85E8;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 133, 232, 0.3);
}

/* Thermal Receipt Print Stylesheet (FR-POS-05 & QA-3) */
@media print {
    /* Hide everything on page except receipt container */
    body {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    header, nav, aside, .no-print, button, .modal-backdrop {
        display: none !important;
    }
    
    #receiptPrintModal {
        position: static !important;
        inset: 0 !important;
        background: transparent !important;
        display: block !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #receiptModalContent {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    #receiptThermalPaper {
        width: 100% !important;
        max-width: 76mm !important;
        margin: 0 auto !important;
        padding: 4mm !important;
        box-shadow: none !important;
        border: none !important;
        color: #000000 !important;
        background: #ffffff !important;
        font-family: 'JetBrains Mono', 'Courier New', Courier, monospace !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    #receiptThermalPaper.format-58mm {
        max-width: 54mm !important;
        font-size: 10px !important;
    }

    #receiptThermalPaper.format-80mm {
        max-width: 76mm !important;
        font-size: 11px !important;
    }

    @page {
        size: auto;
        margin: 3mm;
    }
}