/**
 * Map marketing auth pages (login, select-region) to Try Colors / site theme tokens.
 * Requires: body.auth-marketing-body.site-theme-preview + theme-preview-tokens.js
 * (posPreviewApplyThemeFromLocalStorage — uses DB defaults from PreviewThemeDefaults + localStorage).
 */
body.auth-marketing-body.site-theme-preview .login-section {
    background-color: var(--preview-site-canvas-bg, #e4f5ea);
}

body.auth-marketing-body.site-theme-preview .login-barcode-circle {
    border-color: color-mix(in srgb, var(--preview-accent, #5c8568) 35%, transparent);
}

/*
 * Barcode decoration: same stripe rhythm as auth-marketing-login.css (full pattern);
 * only colors swap to canvas + accent so Try Colors does not simplify the graphic.
 */
body.auth-marketing-body.site-theme-preview .login-barcode-circle-inner {
    --barcode-gap: color-mix(in srgb, var(--preview-site-canvas-bg, #d2e8d9) 88%, var(--preview-accent, #5c8568));
    --barcode-bar: var(--preview-accent, #5c8568);
    background-color: color-mix(in srgb, var(--preview-site-canvas-bg, #d2e8d9) 78%, var(--preview-accent, #5c8568));
    background-image: repeating-linear-gradient(
        90deg,
        var(--barcode-gap) 0px,
        var(--barcode-gap) 2px,
        var(--barcode-bar) 2px,
        var(--barcode-bar) 3px,
        var(--barcode-gap) 3px,
        var(--barcode-gap) 8px,
        var(--barcode-bar) 8px,
        var(--barcode-bar) 9px,
        var(--barcode-gap) 9px,
        var(--barcode-gap) 12px,
        var(--barcode-bar) 12px,
        var(--barcode-bar) 13px,
        var(--barcode-gap) 13px,
        var(--barcode-gap) 17px,
        var(--barcode-bar) 17px,
        var(--barcode-bar) 21px,
        var(--barcode-gap) 21px,
        var(--barcode-gap) 23px,
        var(--barcode-bar) 23px,
        var(--barcode-bar) 25px,
        var(--barcode-gap) 25px,
        var(--barcode-gap) 31px,
        var(--barcode-bar) 31px,
        var(--barcode-bar) 32px,
        var(--barcode-gap) 32px,
        var(--barcode-gap) 33px,
        var(--barcode-bar) 33px,
        var(--barcode-bar) 34px,
        var(--barcode-gap) 34px,
        var(--barcode-gap) 38px,
        var(--barcode-bar) 38px,
        var(--barcode-bar) 40px,
        var(--barcode-gap) 40px,
        var(--barcode-gap) 42px,
        var(--barcode-bar) 42px,
        var(--barcode-bar) 45px,
        var(--barcode-gap) 45px,
        var(--barcode-gap) 46px,
        var(--barcode-bar) 46px,
        var(--barcode-bar) 47px,
        var(--barcode-gap) 47px,
        var(--barcode-gap) 54px,
        var(--barcode-bar) 54px,
        var(--barcode-bar) 55px,
        var(--barcode-gap) 55px,
        var(--barcode-gap) 56px,
        var(--barcode-bar) 56px,
        var(--barcode-bar) 59px,
        var(--barcode-gap) 59px,
        var(--barcode-gap) 61px,
        var(--barcode-bar) 61px,
        var(--barcode-bar) 63px,
        var(--barcode-gap) 63px,
        var(--barcode-gap) 68px,
        var(--barcode-bar) 68px,
        var(--barcode-bar) 69px,
        var(--barcode-gap) 69px,
        var(--barcode-gap) 70px
    );
}

/* Leaf: same silhouette (mask); fill tracks Try Colors accent + dark variant */
body.auth-marketing-body.site-theme-preview .login-leaf-image--themed {
    background: linear-gradient(
        155deg,
        var(--preview-accent, #5c8568) 0%,
        color-mix(in srgb, var(--preview-accent-dark, #3d6345) 78%, var(--preview-accent, #5c8568)) 48%,
        var(--preview-accent-dark, #3d6345) 100%
    );
    filter: drop-shadow(
            -2px -2px 4px color-mix(in srgb, var(--preview-accent, #5c8568) 34%, transparent)
        )
        drop-shadow(2px 2px 3px rgba(255, 255, 255, 0.42));
}

body.auth-marketing-body.site-theme-preview .login-card {
    background: var(--preview-site-card-bg, #ffffff);
    border-color: var(--preview-border-tint, #c7e0d3);
}

body.auth-marketing-body.site-theme-preview .login-badge {
    background-color: var(--preview-cta, #e85520);
    color: var(--preview-cta-on, #ffffff);
}

body.auth-marketing-body.site-theme-preview .login-title {
    color: var(--preview-accent-dark-readable-on-white, var(--preview-accent, #4d7a55));
}

body.auth-marketing-body.site-theme-preview .login-subtitle {
    color: var(--preview-site-content-muted, #6b7280);
}

body.auth-marketing-body.site-theme-preview .login-label {
    color: var(--preview-accent-dark-readable-on-white, var(--preview-accent, #4d7a55));
}

body.auth-marketing-body.site-theme-preview .login-forgot {
    color: var(--preview-accent, #4d7a55);
}

body.auth-marketing-body.site-theme-preview .login-forgot:hover {
    color: var(--preview-cta-hover, #c94008);
}

body.auth-marketing-body.site-theme-preview .login-input {
    border-color: var(--preview-border-tint, #c7e0d3);
    color: var(--preview-site-card-fg, #1f2937);
}

body.auth-marketing-body.site-theme-preview .login-input:hover {
    border-color: color-mix(in srgb, var(--preview-accent, #aecba8) 70%, var(--preview-border-tint, #c7e0d3));
}

body.auth-marketing-body.site-theme-preview .login-input:focus {
    border-color: var(--preview-accent, #4d7a55);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-accent, #4d7a55) 22%, transparent);
}

body.auth-marketing-body.site-theme-preview .login-password-toggle:hover {
    color: var(--preview-accent, #4d7a55);
}

body.auth-marketing-body.site-theme-preview .login-checkbox {
    accent-color: var(--preview-accent, #4d7a55);
}

body.auth-marketing-body.site-theme-preview .login-submit {
    background-color: var(--preview-cta, #e85520);
    color: var(--preview-cta-on, #ffffff);
}

body.auth-marketing-body.site-theme-preview .login-submit:hover {
    background-color: var(--preview-cta-hover, #c94008);
}

body.auth-marketing-body.site-theme-preview .login-submit:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-cta, #e85520) 35%, transparent);
}

body.auth-marketing-body.site-theme-preview .login-link {
    color: var(--preview-accent, #4d7a55);
}

body.auth-marketing-body.site-theme-preview .login-link:hover {
    color: var(--preview-cta-hover, #c94008);
}

body.auth-marketing-body.site-theme-preview .login-message-info {
    background-color: color-mix(in srgb, var(--preview-site-canvas-bg, #e4f5ea) 92%, var(--preview-accent, #4d7a55));
    border-color: var(--preview-border-tint, #c7e0d3);
    color: var(--preview-accent-dark-readable-on-white, var(--preview-accent, #4d7a55));
}

body.auth-marketing-body.site-theme-preview .login-footer-text {
    border-top-color: var(--preview-border-tint, #e4f5ea);
}

body.auth-marketing-body.site-theme-preview .demo-button {
    background-color: var(--preview-cta, #e85520);
    color: var(--preview-cta-on, #ffffff);
    text-decoration: none;
}

body.auth-marketing-body.site-theme-preview .demo-button:hover {
    background-color: var(--preview-cta-hover, #c94008);
}

body.auth-marketing-body.site-theme-preview .nav-bar {
    background-color: var(--preview-site-header-bg, #ffffff);
    border-bottom-color: var(--preview-border-tint, #aecba8);
}

body.auth-marketing-body.site-theme-preview .footer {
    background-color: var(--preview-site-sidebar-bg, #4d7a55);
}

body.auth-marketing-body.site-theme-preview .footer.auth-footer-minimal .footer-copyright {
    color: color-mix(in srgb, var(--preview-site-sidebar-fg, #ffffff) 90%, transparent);
}

body.auth-marketing-body.site-theme-preview .auth-bio-icon-wrap {
    background: color-mix(in srgb, var(--preview-accent, #4d7a55) 14%, transparent);
    color: var(--preview-accent, #4d7a55);
}

body.auth-marketing-body.site-theme-preview .auth-bio-btn {
    background-color: var(--preview-cta, #e85520);
    color: var(--preview-cta-on, #ffffff);
}

body.auth-marketing-body.site-theme-preview .auth-bio-btn:hover {
    background-color: var(--preview-cta-hover, #c94008);
}

body.auth-marketing-body.site-theme-preview .auth-bio-btn:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-cta, #e85520) 35%, transparent);
}

body.auth-marketing-body.site-theme-preview .login-btn-exit {
    color: var(--preview-semantic-danger, #b83232);
    border-color: color-mix(in srgb, var(--preview-semantic-danger, #b83232) 35%, #ffffff);
}

body.auth-marketing-body.site-theme-preview .login-btn-exit:hover {
    background: color-mix(in srgb, var(--preview-semantic-danger, #b83232) 8%, #ffffff);
    border-color: var(--preview-semantic-danger, #b83232);
}

/* Try colors FAB: shown on login / select-region (same panel as POS, including Main area) */
body.auth-marketing-body .pos-preview-theme-tweak-wrap {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}