/**
 * Tokens de la interfaz nueva: los usan la biblioteca (body.rw-shop-ui,
 * shop-ui.css) y el sidebar RW V2.0 de todo el sitio (body.rw-sidebar-v2,
 * sidebar-v2.css). Claro por defecto; oscuro con html[data-rw-mode="dark"].
 *
 * N * var(--rws-u) escala la medida N de la referencia (lienzo de 2138 px)
 * con la ventana, con un mínimo del 80 %.
 *
 * @package RecursosWorship\Modules\ShopUI
 */

html body.rw-shop-ui,
html body.rw-sidebar-v2 {
    --rws-u: clamp(0.8px, 0.04677vw, 1px);
    --rws-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --rws-bg: #ffffff;
    --rws-surface: #f8f8f8;
    --rws-surface-line: #e7e9ee;
    --rws-card: #ffffff;
    --rws-card-line: #e7e9ee;
    --rws-line: #e3e3e3;
    --rws-line-strong: #cfcfcf;
    --rws-hover: #f2f2f2;
    --rws-text: #000000;
    --rws-text-2: #707070;
    --rws-text-3: #8a8a8a;
    --rws-value: #040404;
    --rws-icon-muted: #989898;
    --rws-search-icon: #d9d9d9;
    --rws-pill-bg: #ffffff;
    --rws-pill-active-bg: #000000;
    --rws-pill-active-text: #ffffff;
    --rws-circle-bg: #000000;
    --rws-circle-icon: #ffffff;
    --rws-swatch-bg: #f8f8f8;
    --rws-view: #b4b4b4;
    --rws-view-hover: #666666;
    --rws-view-active: #333333;
    --rws-popover-bg: #ffffff;
    --rws-popover-line: #e7e9ee;
    --rws-input-bg: #ffffff;
    --rws-input-line: #e5e7eb;
    --rws-focus: rgba(92, 151, 230, 0.35);
    --rws-color-submit: #4a6fe3;
    --rws-color-submit-hover: #3e62d4;
    --rws-bar-track: #cfb8ff;
    --rws-bar-fill: linear-gradient(90deg, #bc00ff 0%, #bc00ff 45%, #cfb8ff 100%);
    --rws-upgrade: linear-gradient(90deg, #bc00ff 18%, #7700ff 72%);
    --rws-underline: #d2d2d2;

    /* Sidebar en tarjeta: ancho de la referencia (406 px a 2138) con mínimo. */
    --rws-sidebar-w: clamp(250px, calc(19vw - 30px), 290px);
    --rws-inset-x: 12px;
    --rws-inset-top: 20px;
    --rws-inset-bottom: 12px;
    --rws-gap: calc(40 * var(--rws-u));
    --rws-header-h: calc(124 * var(--rws-u));
    --rws-header-sticky-h: calc(88 * var(--rws-u));
    --rws-ctl-h: calc(44 * var(--rws-u));
    --rws-pad: calc(18 * var(--rws-u));

}

html[data-rw-mode="dark"] body.rw-shop-ui,
html[data-rw-mode="dark"] body.rw-sidebar-v2,
html:not([data-rw-mode]) body.rw-shop-ui.global-color-scheme-light,
html:not([data-rw-mode]) body.rw-sidebar-v2.global-color-scheme-light {
    --rws-bg: #121212;
    --rws-surface: #181818;
    --rws-surface-line: #262626;
    --rws-card: #1f1f1f;
    --rws-card-line: #2b2b2b;
    --rws-line: #333333;
    --rws-line-strong: #4a4a4a;
    --rws-hover: #262626;
    --rws-text: #f5f5f7;
    --rws-text-2: #a1a1a6;
    --rws-text-3: #8a8a8f;
    --rws-value: #f5f5f7;
    --rws-icon-muted: #7a7a80;
    --rws-search-icon: #55555a;
    --rws-pill-bg: #1a1a1a;
    --rws-pill-active-bg: #f5f5f7;
    --rws-pill-active-text: #000000;
    --rws-circle-bg: #f5f5f7;
    --rws-circle-icon: #000000;
    --rws-swatch-bg: #1f1f1f;
    --rws-view: #5c5c62;
    --rws-view-hover: #a1a1a6;
    --rws-view-active: #f5f5f7;
    --rws-popover-bg: #1c1c1c;
    --rws-popover-line: #2e2e2e;
    --rws-input-bg: #141414;
    --rws-input-line: #333333;
    --rws-bar-track: #3a2c55;
    --rws-underline: #48484c;
}

@keyframes rws-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}