/* Shared type scale and theme tokens for seller, buyer and authentication screens. */
:root {
    --font-page-title: 1.5rem;
    --font-section: 1.0625rem;
    --font-body: .9375rem;
    --font-meta: .8125rem;
    --font-caption: .75rem;
    --font-metric: 1.65rem;
    --orderpal-success: #70dcaa;
    --orderpal-success-bg: #18372b;
    --orderpal-warning: #f2c36c;
    --orderpal-warning-bg: #352d1c;
    --orderpal-danger: #ff9ca5;
    --orderpal-danger-bg: #3b232a;
    --orderpal-info: #9dbfff;
    --orderpal-info-bg: #1f304b;
    --bs-heading-color: var(--orderpal-text);
    --bs-emphasis-color: var(--orderpal-text);
    --bs-secondary-bg: var(--orderpal-hover);
    --bs-tertiary-bg: var(--orderpal-hover);
}
html[data-theme="light"] {
    --orderpal-success: #136848;
    --orderpal-success-bg: #e7f6ee;
    --orderpal-warning: #895600;
    --orderpal-warning-bg: #fff4d9;
    --orderpal-danger: #b23447;
    --orderpal-danger-bg: #fff0f2;
    --orderpal-info: #245baa;
    --orderpal-info-bg: #eaf1fe;
}

html { font-size: 14px; }
body { font-size: var(--font-body); font-weight: 400; line-height: 1.6; }
:is(.app-content, .customer-content) { font-size: var(--font-body); }
:is(.app-content, .customer-content) :is(h1, .h1) { font-size: var(--font-page-title); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
:is(.app-content, .customer-content) :is(h2, .h2) { font-size: var(--font-section); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
:is(.app-content, .customer-content) :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) { font-size: var(--font-body); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
:is(.app-content, .customer-content) :is(.page-heading, .dashboard-header) h1 { font-size: var(--font-page-title); font-weight: 600; }
:is(.app-content, .customer-content) :is(.page-heading, .dashboard-header) p { font-size: var(--font-body); line-height: 1.6; }
:is(.app-content, .customer-content) :is(.page-heading-eyebrow, .dashboard-eyebrow, .buyer-eyebrow) { font-size: var(--font-caption); font-weight: 600; letter-spacing: .08em; }
:is(.app-content, .customer-content) :is(strong, b) { font-weight: 600; }
:is(.app-content, .customer-content) :is(.fw-bold, .fw-bolder) { font-weight: 600 !important; }
:is(.app-content, .customer-content) :is(small, .small, .form-text) { font-size: var(--font-meta); line-height: 1.5; }
:is(.app-content, .customer-content) :is(.form-label, .form-check-label) { font-size: var(--font-meta); font-weight: 500; color: var(--orderpal-text); }
:is(.app-content, .customer-content) :is(.form-control, .form-select, .input-group-text, .btn) { font-size: var(--font-body); line-height: 1.5; }
:is(.app-content, .customer-content) .btn { font-weight: 500; }
:is(.app-content, .customer-content) .btn-sm { font-size: var(--font-meta); }
:is(.app-content, .customer-content) :is(.table, .dashboard-table) { font-size: var(--font-body); }
:is(.app-content, .customer-content) :is(.table, .dashboard-table) th { font-size: var(--font-meta); font-weight: 500; text-transform: none; letter-spacing: 0; }
:is(.app-content, .customer-content) .badge { font-size: var(--font-caption); font-weight: 500; }
:is(.app-content, .customer-content) :is(.metric-label, .metric-caption, .panel-link, .table-subtext) { font-size: var(--font-meta); }
:is(.app-content, .customer-content) .metric-value { font-size: var(--font-metric); font-weight: 600; letter-spacing: -.025em; }
:is(.app-content, .customer-content) .metric-value-currency { font-size: 1.4rem; }
.app-sidebar .nav-section-heading { font-size: .7rem; font-weight: 500; letter-spacing: .07em; }
.app-sidebar .sidebar-nav .nav-link { font-size: .875rem; font-weight: 400; }
.app-sidebar .sidebar-nav .nav-link.active { font-weight: 500; }
.app-sidebar .workspace-copy strong { font-size: .9375rem; font-weight: 600; }
.app-sidebar .workspace-copy small, .app-sidebar .account-copy small { font-size: .75rem; }
.topbar-context { font-size: var(--font-meta); }
.theme-toggle { font-size: var(--font-meta); }

/* Include the buyer shell, whose content sits outside .app-content. */
:is(.app-content, .customer-content) :is(.card, .list-group-item, .dropdown-menu, .modal-content, .accordion-item) {
    color: var(--orderpal-text);
    background-color: var(--orderpal-surface);
    border-color: var(--orderpal-border);
}
:is(.app-content, .customer-content) :is(.card-header, .card-footer, .accordion-button) { color: var(--orderpal-text); background-color: var(--orderpal-hover); border-color: var(--orderpal-border); }
:is(.app-content, .customer-content) :is(.form-control, .form-select, .input-group-text) { color: var(--orderpal-text); background-color: var(--orderpal-input); border-color: var(--orderpal-border); }
:is(.app-content, .customer-content) .form-control::placeholder { color: var(--orderpal-muted); opacity: .85; }
:is(.app-content, .customer-content) :is(.form-control, .form-select):focus { color: var(--orderpal-text); background-color: var(--orderpal-input); border-color: var(--orderpal-green); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--orderpal-green), transparent 82%); }
:is(.app-content, .customer-content) :is(.text-muted, .text-secondary) { color: var(--orderpal-muted) !important; }
:is(.app-content, .customer-content) .text-success { color: var(--orderpal-success) !important; }
:is(.app-content, .customer-content) .text-danger { color: var(--orderpal-danger) !important; }
:is(.app-content, .customer-content) .text-warning { color: var(--orderpal-warning) !important; }
:is(.app-content, .customer-content) .table { --bs-table-color: var(--orderpal-text); --bs-table-bg: transparent; --bs-table-border-color: var(--orderpal-border); --bs-table-hover-color: var(--orderpal-text); --bs-table-hover-bg: var(--orderpal-hover); }
.customer-content .btn-primary { --bs-btn-bg: #16865e; --bs-btn-border-color: #16865e; --bs-btn-hover-bg: #11734f; --bs-btn-hover-border-color: #11734f; }
.customer-content .btn-outline-secondary { --bs-btn-color: var(--orderpal-text); --bs-btn-border-color: var(--orderpal-border); --bs-btn-hover-bg: var(--orderpal-hover); --bs-btn-hover-color: var(--orderpal-text); }
.customer-topbar { background: var(--orderpal-surface); }
.customer-topbar > a { color: var(--orderpal-text); font-weight: 600 !important; }
.customer-topbar .text-muted { color: var(--orderpal-muted) !important; }
.customer-content .bg-light, .customer-content .bg-white { color: var(--orderpal-text) !important; background-color: var(--orderpal-surface) !important; }

.workflow-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.live-page .live-cart-total, .pick-summary strong { font-size: 1.25rem; font-weight: 600; }
.live-page .pick-code, .live-page .live-comment-input { font-size: 1rem; font-weight: 500; }
.live-status { color: var(--orderpal-text); background: var(--orderpal-hover); font-size: var(--font-caption); font-weight: 500; }
.live-cart-badge { color: var(--orderpal-info); background: var(--orderpal-info-bg); font-size: var(--font-caption); font-weight: 500; }
.app-content .dashboard .metric > span, .app-content .dashboard .metric > small { color: var(--orderpal-muted); }
.app-content .dashboard .attention { color: var(--orderpal-text); background: var(--orderpal-warning-bg); border-color: color-mix(in srgb, var(--orderpal-warning), var(--orderpal-border) 65%); }
.app-content .dashboard .event-banner h2 { color: #fff; }

/* Chart labels and tooltips follow theme changes without recreating chart data. */
.app-content .apexcharts-text, .app-content .apexcharts-legend-text { fill: var(--orderpal-muted) !important; color: var(--orderpal-muted) !important; font-family: inherit !important; }
.app-content .apexcharts-gridline { stroke: var(--orderpal-border) !important; }
.app-content :is(.apexcharts-tooltip, .apexcharts-xaxistooltip, .apexcharts-tooltip-title) { color: var(--orderpal-text) !important; background: var(--orderpal-surface) !important; border-color: var(--orderpal-border) !important; }

/* Printed media intentionally keeps paper colors in both themes. */
.label-sheet { background: var(--orderpal-hover); }
.sticker-label { color: #172033; background: #fff; color-scheme: light; }
.sticker-copy small { color: #526070; }
::-webkit-scrollbar-track { background: var(--orderpal-bg); }
::-webkit-scrollbar-thumb { border-color: var(--orderpal-bg); background: var(--orderpal-border); }
@media (max-width: 1000px) { .workflow-card-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    html { font-size: 15px; }
    :is(.app-content, .customer-content) :is(input.form-control, select.form-select, textarea.form-control) { font-size: 16px; }
}
@media print { .app-topbar, .app-footer { display: none !important; } .label-sheet { background: white; } }

/* Connection status pill (online payments). Tones: success, warning, danger, muted. */
.payment-status { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; margin-top: .2rem; padding: .18rem .55rem; border-radius: 999px; font-size: var(--font-caption); font-weight: 600; }
.payment-status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.payment-status-success { color: var(--orderpal-success); background: var(--orderpal-success-bg); }
.payment-status-warning { color: var(--orderpal-warning); background: var(--orderpal-warning-bg); }
.payment-status-danger { color: var(--orderpal-danger); background: var(--orderpal-danger-bg); }
.payment-status-muted { color: var(--orderpal-muted); background: var(--orderpal-hover); }
.settings-card-alert { border-color: var(--orderpal-danger) !important; }