/* ==========================================================================
   LIKE theme foundation
   One state contract: html[data-like-theme="light|dark"].
   Components consume semantic tokens; legacy aliases are kept for compatibility.
   ========================================================================== */

:root,
html[data-like-theme="light"] {
    color-scheme: light;

    /* Brand */
    --like-brand-orange: #ef7f1a;
    --like-brand-orange-rgb: 239, 127, 26;
    --like-mono-black: #2b2a29;
    --like-mono-graphite: #434242;
    --like-mono-gray: #5b5b5b;
    --like-mono-mid: #73716d;
    --like-mono-light: #d9dada;
    --like-mono-white: #fefefe;
    --like-warm-brown: #4f331c;
    --like-warm-copper: #9f561e;
    --like-warm-caramel: #bf7d43;
    --like-warm-orange: var(--like-brand-orange);
    --like-warm-peach: #f3ab71;
    --like-warm-cream: #f3d3b6;

    /* Typography */
    --like-font-heading: var(--like-font-family);
    --like-font-display: var(--like-font-family);
    --like-font-body: var(--like-font-family);
    --like-font-condensed: var(--like-font-family);

    /* Semantic surfaces */
    --like-page-bg: #fefefe;
    --like-surface-1: #f7f5f2;
    --like-surface-2: #fbfaf8;
    --like-surface-3: #ffffff;
    --like-surface-raised: #ffffff;
    --like-surface-warm: #fbf4ec;
    --like-media-bg: #f2efea;
    --like-media-text: #2b2a29;

    /* Semantic text */
    --like-text-primary: #2b2a29;
    --like-text-secondary: #4f4d49;
    --like-text-muted: #6f6d69;
    --like-text-inverse: #fefefe;

    /* Semantic borders */
    --like-border-subtle: rgba(43, 42, 41, 0.11);
    --like-border-default: #ddd8d2;
    --like-border-strong: #c5bfb7;

    /* Accent and statuses */
    --like-accent: var(--like-brand-orange);
    --like-accent-hover: #d96e0c;
    --like-accent-active: #bd5908;
    --like-accent-strong: #b95707;
    --like-accent-text: #ffffff;
    --like-accent-soft: rgba(var(--like-brand-orange-rgb), 0.12);
    --like-success: #276a45;
    --like-success-bg: #e9f5ee;
    --like-on-success: #ffffff;
    --like-warning: #80520b;
    --like-warning-bg: #fff4d9;
    --like-on-warning: #21170a;
    --like-danger: #983726;
    --like-danger-bg: #fff0ec;
    --like-on-danger: #ffffff;
    --like-info: #245d7a;
    --like-info-bg: #eaf4f8;
    --like-on-info: #ffffff;

    /* Controls and elevation */
    --like-input-bg: #ffffff;
    --like-input-border: rgba(67, 66, 66, 0.24);
    --like-input-placeholder: #77746f;
    --like-focus-ring: rgba(var(--like-brand-orange-rgb), 0.36);
    --like-disabled-bg: #efede9;
    --like-disabled-text: #77746f;
    --like-overlay: rgba(28, 25, 22, 0.58);
    --like-shadow-sm: 0 8px 24px rgba(43, 42, 41, 0.07);
    --like-shadow-md: 0 18px 46px rgba(43, 42, 41, 0.1);
    --like-shadow-lg: 0 28px 78px rgba(43, 42, 41, 0.14);

    /* Shape */
    --like-radius-sm: 8px;
    --like-radius-md: 12px;
    --like-radius-lg: 16px;
    --like-radius-xl: 24px;
    --like-radius-pill: 999px;

    /* Header and floating surfaces */
    --like-header-bg: rgba(255, 255, 255, 0.96);
    --like-header-top-bg: #f7f5f2;
    --like-header-glass-bg: rgba(254, 254, 254, 0.76);
    --like-header-glass-surface: rgba(254, 254, 254, 0.62);
    --like-header-rail-bg: #ffffff;
    --like-dropdown-bg: #ffffff;
    --like-button-bg: #2b2a29;
    --like-button-text: #ffffff;

    /* Existing project aliases */
    --like-bg: var(--like-page-bg);
    --like-bg-soft: var(--like-surface-1);
    --like-bg-warm: var(--like-surface-warm);
    --like-surface: var(--like-surface-1);
    --like-surface-soft: var(--like-surface-2);
    --like-surface-strong: var(--like-surface-3);
    --like-card-bg: var(--like-surface-raised);
    --like-card: var(--like-surface-raised);
    --like-panel-bg: var(--like-surface-2);
    --like-panel-bg-soft: var(--like-surface-1);
    --like-text: var(--like-text-primary);
    --like-text-soft: var(--like-text-secondary);
    --like-border: var(--like-border-default);
    --like-line: var(--like-border-default);
    --like-line-soft: var(--like-border-subtle);
    --like-orange: var(--like-accent);
    --like-orange-hover: var(--like-accent-hover);
    --like-orange-dark: var(--like-accent-strong);
    --like-orange-soft: var(--like-accent-soft);
    --like-orange-pale: rgba(var(--like-brand-orange-rgb), 0.07);
    --like-danger-soft: var(--like-danger-bg);
    --like-shadow-soft: var(--like-shadow-sm);
    --like-shadow-card: var(--like-shadow-md);
    --like-shadow-hover: var(--like-shadow-lg);
    --like-shadow: var(--like-shadow-md);
    --like-shadow-strong: var(--like-shadow-lg);
    --orange: var(--like-accent);
    --orange-d: var(--like-accent-hover);
    --orange-soft: var(--like-accent-soft);
    --graphite: var(--like-mono-black);
    --ink: var(--like-text-primary);
    --muted: var(--like-text-muted);
    --line: var(--like-border-default);
}

html[data-like-theme="dark"] {
    color-scheme: dark;
    --like-page-bg: #181715;
    --like-surface-1: #211f1d;
    --like-surface-2: #292724;
    --like-surface-3: #302e2a;
    --like-surface-raised: #34312d;
    --like-surface-warm: #2b241e;
    --like-media-bg: #ded8d0;
    --like-media-text: #2b2a29;
    --like-text-primary: #f3eee8;
    --like-text-secondary: #d1c9c0;
    --like-text-muted: #aaa299;
    --like-text-inverse: #24211e;
    --like-border-subtle: rgba(243, 238, 232, 0.1);
    --like-border-default: rgba(243, 238, 232, 0.17);
    --like-border-strong: rgba(243, 238, 232, 0.28);
    --like-accent-hover: #ff9740;
    --like-accent-active: #dd6e11;
    --like-accent-strong: #ffad68;
    --like-accent-text: #ffffff;
    --like-accent-soft: rgba(var(--like-brand-orange-rgb), 0.2);
    --like-success: #7bd6a4;
    --like-success-bg: rgba(58, 158, 104, 0.18);
    --like-on-success: #102318;
    --like-warning: #f1c66f;
    --like-warning-bg: rgba(206, 143, 32, 0.18);
    --like-on-warning: #21170a;
    --like-danger: #ff9b88;
    --like-danger-bg: rgba(211, 74, 49, 0.18);
    --like-on-danger: #2b0f0a;
    --like-info: #88cbe9;
    --like-info-bg: rgba(62, 143, 181, 0.18);
    --like-on-info: #0a1f28;
    --like-input-bg: #292724;
    --like-input-border: rgba(243, 238, 232, 0.24);
    --like-input-placeholder: #aaa299;
    --like-focus-ring: rgba(255, 151, 64, 0.48);
    --like-disabled-bg: #262421;
    --like-disabled-text: #888078;
    --like-overlay: rgba(5, 5, 5, 0.72);
    --like-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.26);
    --like-shadow-md: 0 22px 58px rgba(0, 0, 0, 0.38);
    --like-shadow-lg: 0 34px 96px rgba(0, 0, 0, 0.5);
    --like-header-bg: rgba(24, 23, 21, 0.96);
    --like-header-top-bg: #211f1d;
    --like-header-glass-bg: rgba(24, 23, 21, 0.78);
    --like-header-glass-surface: rgba(41, 39, 36, 0.68);
    --like-header-rail-bg: #211f1d;
    --like-dropdown-bg: #302e2a;
    --like-button-bg: var(--like-accent);
    --like-button-text: var(--like-accent-text);
    --like-orange-pale: rgba(var(--like-brand-orange-rgb), 0.14);
}

html {
    min-width: 320px;
    background: var(--like-page-bg);
}

body {
    margin: 0;
    color: var(--like-text-primary);
    background: var(--like-page-bg);
    font-family: var(--like-font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
.site-main,
.like-catalog-page,
.like-cart-page,
.like-personal,
.like-pv2,
.like-auth-page {
    transition: background-color 0.18s ease, color 0.18s ease;
}

::selection {
    color: var(--like-accent-text);
    background: color-mix(in srgb, var(--like-accent) 72%, transparent);
}

a { color: inherit; }

input,
select,
textarea,
button {
    color-scheme: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    border-color: var(--like-input-border);
    background-color: var(--like-input-bg);
    color: var(--like-text-primary);
}

input::placeholder,
textarea::placeholder {
    color: var(--like-input-placeholder);
    opacity: 1;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--like-accent);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline-color: var(--like-focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
[aria-disabled="true"] {
    border-color: var(--like-border-subtle);
    background-color: var(--like-disabled-bg);
    color: var(--like-disabled-text);
}

html[data-like-theme="dark"] input:-webkit-autofill,
html[data-like-theme="dark"] input:-webkit-autofill:hover,
html[data-like-theme="dark"] input:-webkit-autofill:focus,
html[data-like-theme="dark"] textarea:-webkit-autofill,
html[data-like-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--like-text-primary);
    caret-color: var(--like-text-primary);
    box-shadow: 0 0 0 1000px var(--like-input-bg) inset;
    transition: background-color 9999s ease-out 0s;
}

.button--primary,
button.button--primary {
    border-color: var(--like-accent);
    background: var(--like-accent);
    color: var(--like-accent-text);
}

.button--secondary,
button.button--secondary {
    border-color: var(--like-border-default);
    background: var(--like-surface-raised);
    color: var(--like-text-primary);
}

.site-header,
.info-card,
.advantage-card {
    border-color: var(--like-border-default);
    background-color: var(--like-surface-raised);
    color: var(--like-text-primary);
}

.hero {
    background:
        radial-gradient(circle at 14% 0%, var(--like-accent-soft), transparent 30%),
        linear-gradient(135deg, var(--like-surface-1) 0%, var(--like-page-bg) 55%, var(--like-surface-2) 100%);
}

.hero__label,
.site-nav a:hover { color: var(--like-accent-strong); }

.hero__text { color: var(--like-text-muted); }

/* Public checkout uses the standard Bitrix template, themed here without core edits. */
html[data-like-theme] .bx-soa-wrapper,
html[data-like-theme] .bx-soa {
    color: var(--like-text-primary);
    background: var(--like-page-bg);
}

html[data-like-theme] .bx-soa-section,
html[data-like-theme] .bx-soa-cart-total,
html[data-like-theme] .bx-soa-reg-block,
html[data-like-theme] .bx-soa-pp-company-graf-container,
html[data-like-theme] .bx-soa-pickup-list-item,
html[data-like-theme] .bx-soa-coupon-input,
html[data-like-theme] .soa-property-container .input-group-addon {
    border-color: var(--like-border-default);
    background-color: var(--like-surface-raised);
    color: var(--like-text-primary);
}

html[data-like-theme] .bx-soa-section-title-container,
html[data-like-theme] .bx-soa-item-info-container,
html[data-like-theme] .bx-soa-pickup-list-item.bx-selected,
html[data-like-theme] .bx-soa-pp-desc-container .bx-soa-pp-company,
html[data-like-theme] .bx-sls .quick-location-tag,
html[data-like-theme] .bx-slst .quick-location-tag {
    background-color: var(--like-surface-2);
    color: var(--like-text-primary);
}

html[data-like-theme] .bx-soa-section-title,
html[data-like-theme] .bx-soa-item-title,
html[data-like-theme] .bx-soa-item-td-text,
html[data-like-theme] .bx-soa-info-text,
html[data-like-theme] .bx-soa-location-selected,
html[data-like-theme] .bx-soa .bx-soa-customer-label,
html[data-like-theme] .bx-soa .form-group label,
html[data-like-theme] .bx-soa h3.bx-title,
html[data-like-theme] .bx-soa-cart-d {
    color: var(--like-text-primary);
}

html[data-like-theme] .bx-soa-item-td-title,
html[data-like-theme] .bx-soa-info-title,
html[data-like-theme] .bx-soa-reference,
html[data-like-theme] .bx-soa .form-group label small,
html[data-like-theme] .bx-soa .bx-soa-location-offered small,
html[data-like-theme] .bx-soa-cart-t {
    color: var(--like-text-muted);
}

html[data-like-theme] .bx-soa .form-control,
html[data-like-theme] .bx-soa-pp-field .form-control,
html[data-like-theme] .bx-soa-coupon-input input[type="text"].form-control,
html[data-like-theme] .bx-sls .dropdown-block,
html[data-like-theme] .bx-slst .dropdown-block {
    border-color: var(--like-input-border);
    background: var(--like-input-bg);
    color: var(--like-text-primary);
}

html[data-like-theme] .bx-soa-item-imgcontainer {
    border-color: var(--like-border-subtle);
    background-color: var(--like-media-bg);
}

html[data-like-theme] .bx-soa .btn-primary {
    border-color: var(--like-accent);
    background: var(--like-accent);
    color: var(--like-accent-text);
}

html[data-like-theme] .bx-soa-section.bx-selected { border-color: var(--like-accent); }
html[data-like-theme] .bx-soa-section.bx-step-completed { border-color: var(--like-success); }
html[data-like-theme] .bx-soa-section.bx-step-warning { border-color: var(--like-warning); }
html[data-like-theme] .bx-soa-section.bx-step-error { border-color: var(--like-danger); }

html[data-like-theme] .bx-soa-section-title-count,
html[data-like-theme] .bx-soa-pickup-preview-img,
html[data-like-theme] .bx-soa-coupon-item-mess,
html[data-like-theme] .bx-soa-coupon-item-danger-mess {
    border-color: var(--like-border-default);
}

html[data-like-theme] .bx-soa-coupon-item-mess,
html[data-like-theme] .bx-soa-coupon-item-danger-mess,
html[data-like-theme] #bx-soa-order .bx-pagination-container li span,
html[data-like-theme] #bx-soa-order .bx-pagination-container li a span {
    background: var(--like-surface-raised);
    color: var(--like-text-primary);
    box-shadow: var(--like-shadow-sm);
}

html[data-like-theme] .bx-soa-pickup-l-item-adress,
html[data-like-theme] .bx-soa-empty-cart-desc,
html[data-like-theme] .bx-soa-section-title-count::after {
    color: var(--like-text-primary);
}

html[data-like-theme] .bx-soa-section.bx-step-completed .bx-soa-section-title-count {
    border-color: var(--like-success);
    background: var(--like-success);
}

html[data-like-theme] .bx-soa-section.bx-step-completed .bx-soa-section-title-count::after {
    color: var(--like-on-success);
}

html[data-like-theme] .bx-soa-section.bx-step-warning .bx-soa-section-title-count {
    border-color: var(--like-warning);
    background: var(--like-warning);
}

html[data-like-theme] .bx-soa-section.bx-step-warning .bx-soa-section-title-count::after {
    color: var(--like-on-warning);
}

html[data-like-theme] .bx-soa-section.bx-step-error .bx-soa-section-title-count {
    border-color: var(--like-danger);
    background: var(--like-danger);
}

html[data-like-theme] .bx-soa-section.bx-step-error .bx-soa-section-title-count::after {
    color: var(--like-on-danger);
}

/* Payment-method chooser is mounted dynamically by the public order pages. */
html[data-like-theme] .sale-order-payment-change-pp,
html[data-like-theme] .sale-paysystem-wrapper {
    color: var(--like-text-primary);
}

html[data-like-theme] .sale-order-payment-change-pp-company-graf-container,
html[data-like-theme] .sale-order-payment-change-pp-field .form-control {
    border-color: var(--like-input-border);
    background: var(--like-input-bg);
    color: var(--like-text-primary);
}

html[data-like-theme] .sale-order-payment-change-payment-title,
html[data-like-theme] .sale-order-payment-change-payment-price {
    color: var(--like-text-primary);
}

html[data-like-theme] .sale-order-payment-change-service-small,
html[data-like-theme] .sale-paysystem-description {
    color: var(--like-text-muted);
}

html[data-like-theme] .sale-order-payment-change-status-alert {
    border-color: color-mix(in srgb, var(--like-danger) 40%, transparent);
    background: var(--like-danger-bg);
    color: var(--like-danger);
}

html[data-like-theme] .sale-order-payment-change-status-restricted {
    border-color: var(--like-border-default);
    background: var(--like-surface-1);
    color: var(--like-text-secondary);
}

html[data-like-theme] .sale-order-payment-change-status-success {
    border-color: color-mix(in srgb, var(--like-success) 40%, transparent);
    background: var(--like-success-bg);
    color: var(--like-success);
}

html[data-like-theme] .sale-order-inner-payment-button {
    background: var(--like-accent);
    color: var(--like-accent-text);
}

html[data-like-theme] .sale-order-inner-payment-button:hover {
    background: var(--like-accent-hover);
    color: var(--like-accent-text);
}

/* Public browser-mounted location and suggestion popups. */
html[data-like-theme] .bx-ui-sls-pane,
html[data-like-theme] .bx-ui-sls-fake,
html[data-like-theme] .bx-ui-sls-route,
html[data-like-theme] .bx-ui-sls-variants,
html[data-like-theme] .bx-ui-sls-variant {
    border-color: var(--like-border-default);
    background: var(--like-dropdown-bg);
    color: var(--like-text-primary);
}

html[data-like-theme] .bx-ui-sls-variant:hover,
html[data-like-theme] .bx-ui-sls-variant-active {
    background: var(--like-accent-soft);
    color: var(--like-text-primary);
}

/* Legacy public 404 markup. */
.bx-404-container,
.bx-404-text-block,
.bx-maps-title,
.bx-map-title {
    color: var(--like-text-primary);
}

/* Component scroll areas only; native page scrollbar remains untouched. */
.like-filter__body,
.like-color-picker__list,
.like-header__catalog-card,
.lpf-panel__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--like-border-strong) transparent;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .site-main,
    .like-catalog-page,
    .like-cart-page,
    .like-personal,
    .like-pv2,
    .like-auth-page {
        transition: none;
    }
}

/* Fallback notification used before a page-specific toast system is available. */
.like-favorites-notice {
    position: fixed;
    z-index: 100000;
    left: 50%;
    bottom: 24px;
    max-width: min(92vw, 520px);
    padding: 14px 18px;
    color: var(--like-text-primary);
    font: 600 14px/1.4 var(--like-font-body);
    text-align: center;
    background: var(--like-surface-raised);
    border: 1px solid var(--like-border-default);
    border-radius: 14px;
    box-shadow: var(--like-shadow-md);
    transform: translateX(-50%);
}