/* ═══════════════════════════════════════════════════════════════
   GLOBAL THEMES (Design Tokens)
   Contains ONLY CSS color variables for themes.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --c-bg: #f8fafc; /* Layout background */
    --c-card-bg: #ffffff;
    --c-card-img-bg: #f8f9fa;
    --c-text-primary: #1e293b;
    --c-text-muted: #64748b;
    --c-accent: #10b981;
    --c-accent-hover: #059669;
    --c-accent-light: rgba(16, 185, 129, 0.1);
    --c-border: #e2e8f0;
    --c-radius: 16px;
    --c-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

:root[data-theme="light"] {
    /* NavMenu — solid light surface so page content never shows through. */
    --lx-header-bg:         #ffffff;
    --lx-header-inner-bg:   #ffffff;
    --lx-header-border:     rgba(15, 23, 42, .10);
    --lx-header-shadow:     rgba(15, 23, 42, .08);
    --lx-nav-text:          #172033;
    --lx-nav-icon:          #0f6a51;
    --lx-nav-active-bg:     linear-gradient(180deg, #159b73, #0f6a51);
    --lx-nav-active-text:   #ffffff;
    --lx-nav-active-shadow: rgba(15, 106, 81, .24);
    --lx-dd-bg:             #ffffff;
    --lx-dd-text:           #172033;
    --lx-dd-icon:           #0f6a51;
    --lx-dd-hover-bg:       rgba(15, 106, 81, .08);
    --lx-dd-hover-text:     #0a6047;
    --lx-dd-border:         rgba(15, 23, 42, .09);
    --lx-dd-shadow:         rgba(15, 23, 42, .14);
    --lx-mobile-bg:         #ffffff;
    --lx-mobile-icon:       #0f6a51;
    --lx-mobile-border:     rgba(15, 23, 42, .08);
    --lx-badge-bg:          #0f6a51;
    --lx-cart-hover-bg:     rgba(15, 106, 81, .10);
    --lx-cart-hover-shadow: rgba(15, 106, 81, .18);
    --lx-auth-bg:           #0f6a51;
    --lx-auth-text:         #ffffff;
    --lx-auth-ghost-border: rgba(15, 106, 81, .24);
    --lx-auth-ghost-text:   #0f6a51;
    --lx-avatar-bg:         #0f6a51;
    --lx-overlay-bg:        rgba(15, 23, 42, .24);
    --lx-logo-text:         #172033;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --c-bg: #0b1220;
    --c-card-bg: #111c2e;
    --c-card-img-bg: #17243a;
    --c-text-primary: #f1f5f9;
    --c-text-secondary: #b4c1d2;
    --c-text-muted: #94a3b8;
    --c-accent: #38bdf8;
    --c-accent-hover: #0ea5e9;
    --c-accent-light: rgba(56, 189, 248, 0.16);
    --c-border: #26364d;

    /* Compatibility aliases used by older storefront components. */
    --card-bg: var(--c-card-bg);
    --card-img-bg: var(--c-card-img-bg);
    --text-primary: var(--c-text-primary);
    --text-secondary: var(--c-text-secondary);
    --text-color: var(--c-text-primary);
    --text-muted: var(--c-text-muted);
    --border-color: var(--c-border);
    --accent: var(--c-accent);
    --price-color: var(--c-accent);

    --adm-bg:               #0b1220;
    --adm-page-bg:          transparent;
    --adm-card-bg:          #111c2e;
    --adm-card:             #111c2e;
    --adm-input-bg:         #17243a;
    --adm-text:             #f1f5f9;
    --adm-text-muted:       #94a3b8;
    --adm-primary:          #38bdf8;
    --adm-shadow:           rgba(0, 0, 0, 0.38);
    --adm-warning-bg:       rgba(245, 158, 11, 0.14);
    --adm-warning-text:     #fbbf24;

    --adm-toolbar-bg:       rgba(13, 23, 38, 0.96);
    --adm-toolbar-border:   rgba(148, 163, 184, 0.16);
    --adm-toolbar-shadow:   rgba(0, 0, 0, 0.50);

    --adm-border-light:     rgba(148, 163, 184, 0.14);
    --adm-border-hover:     rgba(125, 211, 252, 0.36);

    --adm-accent:           #38bdf8;
    --adm-accent-light:     rgba(56, 189, 248, 0.14);
    --adm-accent-border:    rgba(56, 189, 248, 0.48);
    --adm-accent-text:      #7dd3fc;

    --adm-sel-border:       rgba(56, 189, 248, 0.48);
    --adm-sel-shadow:       rgba(0, 0, 0, 0.50);
    --adm-sel-bg-gradient:  linear-gradient(180deg, rgba(56, 189, 248, 0.12), var(--adm-card-bg) 60%);
    --adm-sel-accent:       rgba(56, 189, 248, 0.82);
    --adm-sel-text:         #7dd3fc;

    --adm-ctx-bg:           rgba(56, 189, 248, 0.10);

    --adm-btn-bg:           #17243a;
    --adm-btn-bg-hover:     #21324d;
    --adm-btn-border:       rgba(148, 163, 184, 0.18);
    --adm-btn-shadow:       rgba(0, 0, 0, 0.25);
    --adm-btn-danger-bg:    rgba(220, 80, 60, 0.14);
    --adm-btn-danger-hover: rgba(220, 80, 60, 0.24);
    --adm-btn-danger-border:rgba(220, 80, 60, 0.38);
    --adm-btn-danger-text:  #fca5a5;

    --adm-modal-overlay:    rgba(0, 0, 0, 0.65);
    --adm-modal-bg:         #111c2e;
    --adm-modal-shadow:     rgba(0, 0, 0, 0.60);
    --adm-pre-bg:           #0b1220;

    --adm-dot-color:        rgba(56, 189, 248, 0.78);
    --adm-dot-shadow:       rgba(56, 189, 248, 0.18);
    --adm-block-title-color:#b4c1d2;

    --fl-label-bg:          #111c2e;
    --fl-label-color:       #7dd3fc;
    --fl-border:            rgba(56, 189, 248, 0.42);
    --fl-border-focus:      rgba(56, 189, 248, 0.90);
    --fl-focus-shadow:      rgba(56, 189, 248, 0.20);
    --fl-prefix-color:      #7dd3fc;
    --fl-prefix-bg:         rgba(56, 189, 248, 0.14);
    --fl-input-bg:          #17243a;
    --fl-input-color:       #f1f5f9;
    --fl-placeholder:       #718198;
    --fl-checked-bg:        #0ea5e9;
    --fl-checked-border:    #0ea5e9;
    --fl-hint-color:        #94a3b8;
    --fl-chevron-color:     #94a3b8;

    /* NavMenu */
    --lx-header-bg:         rgba(11, 18, 32, .97);
    --lx-header-inner-bg:   rgba(13, 23, 38, .97);
    --lx-header-border:     rgba(148, 163, 184, .16);
    --lx-header-shadow:     rgba(0, 0, 0, .30);
    --lx-nav-text:          #f1f5f9;
    --lx-nav-icon:          #7dd3fc;
    --lx-nav-active-bg:     linear-gradient(180deg, #0ea5e9, #0284c7);
    --lx-nav-active-text:   #ffffff;
    --lx-nav-active-shadow: rgba(14, 165, 233, .28);
    --lx-dd-bg:             #111c2e;
    --lx-dd-text:           #f1f5f9;
    --lx-dd-icon:           #7dd3fc;
    --lx-dd-hover-bg:       rgba(56, 189, 248, .14);
    --lx-dd-hover-text:     #bae6fd;
    --lx-dd-border:         rgba(148, 163, 184, .16);
    --lx-dd-shadow:         rgba(0, 0, 0, .40);
    --lx-mobile-bg:         #111c2e;
    --lx-mobile-icon:       #7dd3fc;
    --lx-mobile-border:     rgba(148, 163, 184, .16);
    --lx-badge-bg:          #0ea5e9;
    --lx-cart-hover-bg:     rgba(56, 189, 248, .16);
    --lx-cart-hover-shadow: rgba(56, 189, 248, .26);
    --lx-auth-bg:           #0ea5e9;
    --lx-auth-text:         #ffffff;
    --lx-auth-ghost-border: rgba(56, 189, 248, .34);
    --lx-auth-ghost-text:   #7dd3fc;
    --lx-avatar-bg:         #0ea5e9;
    --lx-overlay-bg:        rgba(0, 0, 0, .60);
    --lx-logo-text:         #ffffff;
}
/* ── 1d. SKY (soft blue-grey — airy, gentle) ── */
[data-theme="sky"] {
    color-scheme: light;
    --c-bg:                 #f0f4f8;
    --c-card-bg:            #ffffff;
    --c-card-img-bg:        #f8fafc;
    --c-text-primary:       #1e293b;
    --c-text-muted:         #64748b;
    --c-accent:             #3b82f6;
    --c-accent-hover:       #2563eb;
    --c-accent-light:       rgba(59, 130, 246, 0.1);
    --c-border:             #e2e8f0;

    --adm-bg:               #eef3f8;
    --adm-page-bg:          transparent;
    --adm-card-bg:          #ffffff;
    --adm-text:             #2a3440;
    --adm-text-muted:       rgba(42, 52, 64, 0.50);

    --adm-toolbar-bg:       rgba(238, 243, 248, 0.94);
    --adm-toolbar-border:   rgba(0, 0, 0, 0.06);
    --adm-toolbar-shadow:   rgba(0, 0, 0, 0.03);

    --adm-border-light:     rgba(0, 0, 0, 0.07);
    --adm-border-hover:     rgba(0, 0, 0, 0.13);

    --adm-accent:           #60a5fa;          /* blue-400 muted */
    --adm-accent-light:     rgba(96,165,250, 0.10);
    --adm-accent-border:    rgba(96,165,250, 0.40);
    --adm-accent-text:      #3b82f6;

    --adm-sel-border:       rgba(96,165,250, 0.45);
    --adm-sel-shadow:       rgba(96,165,250, 0.10);
    --adm-sel-bg-gradient:  linear-gradient(180deg, rgba(96,165,250,0.06), var(--adm-card-bg) 60%);
    --adm-sel-accent:       rgba(96,165,250, 0.55);
    --adm-sel-text:         rgba(59,130,246, 0.85);

    --adm-ctx-bg:           rgba(96,165,250, 0.05);

    --adm-btn-bg:           #ffffff;
    --adm-btn-bg-hover:     #e8eef4;
    --adm-btn-border:       rgba(0, 0, 0, 0.09);
    --adm-btn-shadow:       rgba(0, 0, 0, 0.04);
    --adm-btn-danger-bg:    rgba(220, 60, 60, 0.06);
    --adm-btn-danger-hover: rgba(220, 60, 60, 0.12);
    --adm-btn-danger-border:rgba(220, 60, 60, 0.25);
    --adm-btn-danger-text:  #b91c1c;

    --adm-modal-overlay:    rgba(0, 0, 0, 0.30);
    --adm-modal-bg:         #ffffff;
    --adm-modal-shadow:     rgba(0, 0, 0, 0.20);
    --adm-pre-bg:           #e8eef4;

    --adm-dot-color:        rgba(96,165,250, 0.65);
    --adm-dot-shadow:       rgba(96,165,250, 0.12);
    --adm-block-title-color:rgba(42,52,64, 0.60);

    --fl-label-bg:          #fff;
    --fl-label-color:       rgba(59,130,246, 0.80);
    --fl-border:            rgba(96,165,250, 0.40);
    --fl-border-focus:      rgba(59,130,246, 0.85);
    --fl-focus-shadow:      rgba(59,130,246, 0.14);
    --fl-prefix-color:      rgba(59,130,246, 0.85);
    --fl-prefix-bg:         rgba(96,165,250, 0.08);
    --fl-input-bg:          #fff;
    --fl-input-color:       #2a3440;
    --fl-placeholder:       rgba(42,52,64, 0.38);
    --fl-checked-bg:        rgba(59,130,246, 0.85);
    --fl-checked-border:    rgba(59,130,246, 0.85);

    /* NavMenu */
    --lx-header-bg:         rgba(238, 243, 248, .92);
    --lx-header-inner-bg:   rgba(255, 255, 255, .94);
    --lx-header-border:     rgba(0, 0, 0, .06);
    --lx-header-shadow:     rgba(0, 0, 0, .06);
    --lx-nav-text:          #2a3440;
    --lx-nav-icon:          #3b82f6;
    --lx-nav-active-bg:     linear-gradient(180deg, #2563eb, #1d4ed8);
    --lx-nav-active-text:   #fff;
    --lx-nav-active-shadow: rgba(37, 99, 235, .25);
    --lx-dd-bg:             #fff;
    --lx-dd-text:           #2a3440;
    --lx-dd-icon:           #3b82f6;
    --lx-dd-hover-bg:       rgba(59, 130, 246, .08);
    --lx-dd-hover-text:     #2563eb;
    --lx-dd-border:         rgba(0, 0, 0, .06);
    --lx-dd-shadow:         rgba(0, 0, 0, .10);
    --lx-mobile-bg:         #fff;
    --lx-mobile-icon:       #3b82f6;
    --lx-mobile-border:     rgba(0, 0, 0, .06);
    --lx-badge-bg:          #2563eb;
    --lx-cart-hover-bg:     rgba(59, 130, 246, .12);
    --lx-cart-hover-shadow: rgba(59, 130, 246, .20);
    --lx-auth-bg:           #2563eb;
    --lx-auth-text:         #fff;
    --lx-auth-ghost-border: rgba(37, 99, 235, .20);
    --lx-auth-ghost-text:   #2563eb;
    --lx-avatar-bg:         #2563eb;
    --lx-overlay-bg:        rgba(0, 0, 0, .26);
    --lx-logo-text:         #2a3440;
}

/* ── 1f. VIBER (purple) ── */
[data-theme="viber"] {
    color-scheme: light;
    --c-bg:                 #f9f8ff;
    --c-card-bg:            #ffffff;
    --c-card-img-bg:        #fcfbfe;
    --c-text-primary:       #1d1933;
    --c-text-muted:         #6b6387;
    --c-accent:             #7360F2;
    --c-accent-hover:       #5c4ab8;
    --c-accent-light:       rgba(115, 96, 242, 0.1);
    --c-border:             #eae6f5;

    --adm-bg:               #f3f2fc;
    --adm-page-bg:          transparent;
    --adm-card-bg:          #ffffff;
    --adm-text:             #1d1933;
    --adm-text-muted:       rgba(29, 25, 51, 0.50);

    --adm-toolbar-bg:       rgba(243, 242, 252, 0.94);
    --adm-toolbar-border:   rgba(0, 0, 0, 0.06);
    --adm-toolbar-shadow:   rgba(0, 0, 0, 0.04);

    --adm-border-light:     rgba(0, 0, 0, 0.08);
    --adm-border-hover:     rgba(0, 0, 0, 0.14);

    --adm-accent:           #665cac;          
    --adm-accent-light:     rgba(115,96,242, 0.10);
    --adm-accent-border:    rgba(115,96,242, 0.35);
    --adm-accent-text:      #5c4ab8;

    --adm-sel-border:       rgba(115,96,242, 0.45);
    --adm-sel-shadow:       rgba(115,96,242, 0.12);
    --adm-sel-bg-gradient:  linear-gradient(180deg, rgba(115,96,242,0.06), var(--adm-card-bg) 60%);
    --adm-sel-accent:       rgba(115,96,242, 0.60);
    --adm-sel-text:         rgba(92,74,184, 0.90);

    --adm-ctx-bg:           rgba(115,96,242, 0.06);

    --adm-btn-bg:           #ffffff;
    --adm-btn-bg-hover:     #eaeaef;
    --adm-btn-border:       rgba(0, 0, 0, 0.09);
    --adm-btn-shadow:       rgba(0, 0, 0, 0.05);
    --adm-btn-danger-bg:    rgba(220, 60, 60, 0.05);
    --adm-btn-danger-hover: rgba(220, 60, 60, 0.12);
    --adm-btn-danger-border:rgba(220, 60, 60, 0.25);
    --adm-btn-danger-text:  #b91c1c;

    --adm-modal-overlay:    rgba(0, 0, 0, 0.35);
    --adm-modal-bg:         #ffffff;
    --adm-modal-shadow:     rgba(0, 0, 0, 0.20);
    --adm-pre-bg:           #e9e7f4;

    --adm-dot-color:        rgba(115,96,242, 0.70);
    --adm-dot-shadow:       rgba(115,96,242, 0.12);
    --adm-block-title-color:rgba(29, 25, 51, 0.60);

    --fl-label-bg:          #fff;
    --fl-label-color:       rgba(92,74,184, 0.85);
    --fl-border:            rgba(115,96,242, 0.40);
    --fl-border-focus:      rgba(92,74,184, 0.90);
    --fl-focus-shadow:      rgba(92,74,184, 0.14);
    --fl-prefix-color:      rgba(92,74,184, 0.90);
    --fl-prefix-bg:         rgba(115,96,242, 0.08);
    --fl-input-bg:          #fff;
    --fl-input-color:       #1d1933;
    --fl-placeholder:       rgba(29, 25, 51, 0.40);
    --fl-checked-bg:        rgba(92,74,184, 0.90);
    --fl-checked-border:    rgba(92,74,184, 0.90);
    --fl-hint-color:        rgba(29, 25, 51, 0.50);
    --fl-chevron-color:     rgba(29, 25, 51, 0.50);

    /* NavMenu */
    --lx-header-bg:         rgba(243, 242, 252, .92);
    --lx-header-inner-bg:   rgba(255, 255, 255, .94);
    --lx-header-border:     rgba(0, 0, 0, .06);
    --lx-header-shadow:     rgba(0, 0, 0, .06);
    --lx-nav-text:          #1d1933;
    --lx-nav-icon:          #665cac;
    --lx-nav-active-bg:     linear-gradient(180deg, #8174df, #665cac);
    --lx-nav-active-text:   #fff;
    --lx-nav-active-shadow: rgba(102, 92, 172, .25);
    --lx-dd-bg:             #fff;
    --lx-dd-text:           #1d1933;
    --lx-dd-icon:           #665cac;
    --lx-dd-hover-bg:       rgba(115, 96, 242, .08);
    --lx-dd-hover-text:     #5c4ab8;
    --lx-dd-border:         rgba(0, 0, 0, .06);
    --lx-dd-shadow:         rgba(0, 0, 0, .10);
    --lx-mobile-bg:         #fff;
    --lx-mobile-icon:       #665cac;
    --lx-mobile-border:     rgba(0, 0, 0, .06);
    --lx-badge-bg:          #665cac;
    --lx-cart-hover-bg:     rgba(115, 96, 242, .12);
    --lx-cart-hover-shadow: rgba(115, 96, 242, .20);
    --lx-auth-bg:           #665cac;
    --lx-auth-text:         #fff;
    --lx-auth-ghost-border: rgba(115, 96, 242, .20);
    --lx-auth-ghost-text:   #665cac;
    --lx-avatar-bg:         #665cac;
    --lx-overlay-bg:        rgba(0, 0, 0, .26);
    --lx-logo-text:         #1d1933;
}