/* Material App Centralized Stylesheet */

:root {
    --brand-black: #352f2a; 
    --brand-yellow: #FEBE3B;
    --brand-dark-yellow: #F99F00;
    --brand-white: #ffffff;
    --brand-cream: #F4F2DF;
    --brand-dark: #B8B09C;
}

body {
    background-color: var(--brand-cream);
    color: var(--brand-black);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.text-brand-black { color: var(--brand-black); }
.text-brand-muted { color: var(--brand-dark); }
.text-brand-accent { color: var(--brand-dark-yellow); }

.bg-brand-black { background-color: var(--brand-black); }
.bg-brand-yellow { background-color: var(--brand-yellow); }
.bg-brand-cream { background-color: var(--brand-cream); }

.card-container {
    background-color: var(--brand-white);
    border-radius: 2.5rem;
    border: 1px solid rgba(184, 176, 156, 0.2);
}

.nav-sidebar {
    background-color: var(--brand-black);
    color: var(--brand-dark);
}

.modal-overlay {
    background-color: rgba(53, 47, 42, 0.9);
    backdrop-filter: blur(4px);
}

.table-header-bg {
    background-color: rgba(244, 242, 223, 0.5);
}

.divider-brand {
    border-color: var(--brand-cream);
}

.input-brand {
    background-color: rgba(244, 242, 223, 0.5);
    border: 2px solid transparent;
    border-radius: 1rem;
    color: var(--brand-black);
    transition: all 0.2s ease;
}

.input-brand:focus {
    background-color: var(--brand-white);
    border-color: var(--brand-yellow);
    outline: none;
}

.btn-calculate {
    background-color: var(--brand-yellow);
    color: var(--brand-white);
    transition: all 0.2s ease;
}

.btn-calculate:hover {
    background-color: var(--brand-dark-yellow);
}

.btn-save {
    background-color: var(--brand-black);
    color: var(--brand-white);
    transition: all 0.2s ease;
}

.btn-save:hover {
    background-color: var(--brand-dark-yellow);
}

.summary-bg {
    background-color: var(--brand-black);
    color: var(--brand-white);
}

.margin-row {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.highlight-yellow {
    color: var(--brand-yellow);
}

/* PO Builder Specific Styles */
.email-preview {
    font-family: 'Courier New', Courier, monospace;
    background: #fdfdfd;
    border: 2px dashed var(--brand-dark);
}