:root {
    --bezy-almond: #E4D6CD;
    --bezy-pistachio: #D0F0C0;
    --bezy-ink: color-mix(in srgb, var(--bezy-pistachio) 12%, black);
    --bezy-muted: color-mix(in srgb, var(--bezy-almond) 38%, black);
    --bezy-paper: color-mix(in srgb, var(--bezy-almond) 58%, white);
    --bezy-soft: color-mix(in srgb, var(--bezy-almond) 82%, white);
    --bezy-accent-ink: color-mix(in srgb, var(--bezy-pistachio) 44%, black);
    --bezy-line: color-mix(in srgb, var(--bezy-ink) 18%, transparent);
    --bezy-shadow: 0 20px 54px color-mix(in srgb, var(--bezy-ink) 14%, transparent);

    /* One shared palette for storefront, customer account, and control room. */
    --cream: var(--bezy-almond);
    --paper: var(--bezy-paper);
    --blush: var(--bezy-pistachio);
    --rose: var(--bezy-accent-ink);
    --sage: var(--bezy-accent-ink);
    --gold: var(--bezy-accent-ink);
    --ink: var(--bezy-ink);
    --muted: var(--bezy-muted);
    --line: var(--bezy-line);
    --shadow: var(--bezy-shadow);

    --bg: var(--bezy-almond);
    --surface: var(--bezy-paper);
    --surface-2: var(--bezy-soft);
    --rose-soft: var(--bezy-pistachio);
    --sage-soft: var(--bezy-pistachio);
    --gold-soft: var(--bezy-pistachio);
    --sidebar: var(--bezy-ink);
    --sidebar-muted: var(--bezy-almond);

    --project-ink: var(--bezy-ink);
    --project-muted: var(--bezy-muted);
    --project-line: var(--bezy-line);
    --project-rose: var(--bezy-accent-ink);
    --project-rose-soft: var(--bezy-pistachio);
    --project-sage: var(--bezy-accent-ink);
    --project-sage-soft: var(--bezy-pistachio);
    --project-gold: var(--bezy-accent-ink);
}

html,
body,
.control-body,
.login-page {
    background-color: var(--bezy-almond);
    color: var(--bezy-ink);
}

body,
button,
input,
select,
textarea {
    accent-color: var(--bezy-accent-ink);
}

::selection {
    background: var(--bezy-pistachio);
    color: var(--bezy-ink);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: var(--bezy-accent-ink) !important;
}

/* Pale surfaces */
:where(
    .site-header,
    .menu-section,
    .product-card,
    .hero-note,
    .order-drawer,
    .account-header,
    .account-card,
    .profile-strip,
    .customer-panel,
    .status-card,
    .invoice-sheet,
    .z-sheet,
    .print-document,
    .panel,
    .metric-grid article,
    .integration-card,
    .pos-product,
    .pos-cart,
    .receipt-card,
    .till-close-drawer > form,
    .project-card,
    .launch-card,
    .account-project-card
) {
    background-color: var(--bezy-paper) !important;
    border-color: var(--bezy-line) !important;
}

:where(input, select, textarea, .field, .secondary-button, .subtle) {
    background-color: var(--bezy-soft) !important;
    border-color: var(--bezy-line) !important;
    color: var(--bezy-ink) !important;
}

/* The exact pistachio is the only chromatic accent. */
:where(
    .button,
    button[type="submit"],
    .pay-button,
    .drawer-submit,
    .status-button,
    .print-button,
    .project-help,
    .order-card,
    .auth-intro,
    .login-form button,
    .till-close-drawer > summary,
    .customer-approval button,
    .form-submit,
    .primary-button
) {
    background-color: var(--bezy-pistachio) !important;
    border-color: var(--bezy-accent-ink) !important;
    color: var(--bezy-ink) !important;
}

:where(
    .hero-visual,
    .story-collage,
    .product-image,
    .product-thumb,
    .pos-product-image
) img {
    background-color: var(--bezy-pistachio);
}

.hero-visual::before,
.hero-note > span,
.story-stamp,
.occasions,
.signed-in-checkout,
.payment-secure-note,
.cart-summary,
.builder-confirm,
.reference-upload,
.quote-note,
.order-details div,
.status-pills span,
.customer-approval form,
.project-brief-card > p,
.employee-avatar,
.employee-detail,
.payroll-body,
.finance-notes p,
.integration-note,
.movement-mini-list > span,
.open-till-list details > form,
.pos-order-number,
.payment-grid input:checked + span,
.pos-till-state,
.connection-badge,
.status,
.badge {
    background-color: var(--bezy-pistachio) !important;
    color: var(--bezy-ink) !important;
}

/* Dark neutral structure is derived from the two-color palette for contrast. */
:where(
    .announcement,
    .sidebar,
    .customer-project-hero,
    .till-cockpit,
    .account-toast,
    .site-toast,
    .receipt-actions .dark,
    .status-button.secondary
) {
    background-color: var(--bezy-ink) !important;
    color: var(--bezy-pistachio) !important;
}

.till-live-grid,
.till-live-grid > div,
.till-live-grid .expected {
    background-color: color-mix(in srgb, var(--bezy-ink) 92%, var(--bezy-pistachio)) !important;
}

:where(
    .eyebrow,
    .kicker,
    .status-kicker,
    .account-welcome span,
    .orders-heading span,
    .panel-number,
    .section-title + span,
    .text-action,
    .project-back,
    .customer-panel header > span,
    .order-link-card > span,
    .invoice-title small,
    .invoice-meta small,
    .grand-total strong,
    .summary-total strong,
    .invoice-total strong
) {
    color: var(--bezy-accent-ink);
}

:where(
    .announcement,
    .sidebar,
    .customer-project-hero,
    .till-cockpit,
    .account-toast,
    .site-toast
) a {
    color: var(--bezy-pistachio) !important;
}

:where(
    .account-errors,
    .account-page-errors,
    .builder-errors,
    .form-errors,
    .login-error,
    .project-errors,
    .status-error,
    .pos-till-state.locked
) {
    background-color: var(--bezy-almond) !important;
    border-color: var(--bezy-accent-ink) !important;
    color: var(--bezy-ink) !important;
}

:where(
    .account-success,
    .project-message,
    .status-completed,
    .status-ready,
    .status-paid,
    .status-approved,
    .status-active,
    .status-configured,
    .status-processing,
    .connection-badge.ready_for_testing,
    .connection-badge.configured
) {
    background-color: var(--bezy-pistachio) !important;
    color: var(--bezy-ink) !important;
}

.dock-whatsapp {
    background-color: var(--bezy-pistachio) !important;
    border-color: var(--bezy-accent-ink) !important;
    color: var(--bezy-ink) !important;
}

.button:hover,
button[type="submit"]:hover,
.dock-action:hover,
.dock-action:focus-visible {
    background-color: var(--bezy-ink) !important;
    border-color: var(--bezy-ink) !important;
    color: var(--bezy-pistachio) !important;
}

.site-header,
.account-header,
.account-jump {
    background-color: color-mix(in srgb, var(--bezy-almond) 90%, transparent) !important;
}

@media print {
    html,
    body,
    .invoice-sheet,
    .z-sheet,
    .print-document {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}