[data-theme="light"] {
    --lm-bg:         #fcfcf8;
    --lm-surface:    #ffffff;
    --lm-elevated:   #f5f3eb;
    --lm-text:       #0f172a;
    --lm-text-mid:   #525252;
    --lm-text-muted: #616161;
    --lm-text-faint: #666666;
    --lm-brand-text: #a3520b;
    --lm-brand-text-strong: #92400e;
    --lm-success-text: #166534;
    --lm-danger-text: #b91c1c;
    --lm-info-text: #0369a1;
    --lm-input-bg: #ffffff;
    --lm-input-border: rgba(0, 0, 0, 0.14);
    --lm-input-border-hover: rgba(0, 0, 0, 0.26);
    --lm-border:     rgba(0, 0, 0, 0.08);
    --lm-border-sof: rgba(0, 0, 0, 0.05);
    --lm-glass-5:    rgba(0, 0, 0, 0.05);
    --lm-glass-8:    rgba(0, 0, 0, 0.08);
    --lm-glass-2:    rgba(0, 0, 0, 0.015);
    --lm-glass-4:    rgba(0, 0, 0, 0.04);
    --lm-glass-6:    rgba(0, 0, 0, 0.06);
    body { background-color: var(--lm-bg); color: var(--lm-text); }
    .bg-\[\#0a0a0a\],
    .bg-\[\#050505\]    { background-color: var(--lm-bg); }
    .bg-\[\#171717\]    { background-color: var(--lm-surface); }
    .bg-\[\#141414\]    { background-color: var(--lm-surface); }
    .bg-\[\#0f0f0f\],
    .bg-\[\#0f0f0f\]\/95 { background-color: rgba(255, 255, 255, 0.95); }
    .bg-\[\#0a0a0a\]\/95,
    .bg-\[\#0a0a0a\]\/98,
    .bg-\[\#0a0a0a\]\/90 { background-color: rgba(255, 255, 255, 0.95); }
    .bg-\[\#171717\]\/30 { background-color: var(--lm-elevated); }
    .bg-black\/50,
    .bg-black\/60,
    .bg-black\/95       { background-color: rgba(0, 0, 0, 0.3); }
    .bg-white\/5          { background-color: var(--lm-glass-5); }
    .bg-white\/10         { background-color: var(--lm-glass-8); }
    .bg-white\/20         { background-color: rgba(0, 0, 0, 0.12); }
    .bg-white\/40         { background-color: rgba(0, 0, 0, 0.2); }
    .bg-white\/\[0\.02\]  { background-color: var(--lm-glass-2); }
    .bg-white\/\[0\.03\]  { background-color: var(--lm-glass-4); }
    .bg-white\/\[0\.04\]  { background-color: var(--lm-glass-5); }
    .bg-white\/\[0\.06\]  { background-color: var(--lm-glass-6); }
    .hover\:bg-white\/5:hover             { background-color: var(--lm-glass-5); }
    .hover\:bg-white\/10:hover            { background-color: var(--lm-glass-8); }
    .hover\:bg-white\/20:hover            { background-color: rgba(0, 0, 0, 0.1); }
    .hover\:bg-white\/25:hover            { background-color: rgba(0, 0, 0, 0.15); }
    .hover\:bg-white\/\[0\.02\]:hover     { background-color: var(--lm-glass-2); }
    .hover\:bg-white\/\[0\.04\]:hover     { background-color: var(--lm-glass-4); }
    .hover\:bg-white\/\[0\.06\]:hover     { background-color: var(--lm-glass-6); }
    .hover\:bg-red-400\/80:hover          { background-color: rgba(239, 68, 68, 0.5); }
    .hover\:bg-red-400\/10:hover          { background-color: rgba(239, 68, 68, 0.1); }
    .group:hover .group-hover\:bg-white\/20 { background-color: rgba(0, 0, 0, 0.12); }
    .group:hover .group-hover\:bg-amber-500\/20 { background-color: rgba(var(--color-brand), 0.2); }
    .group:hover .group-hover\:bg-amber-500 { background-color: var(--arcsys-brand); }
    .bg-amber-500\/5   { background-color: rgba(var(--color-brand), 0.05); }
    .bg-amber-500\/10  { background-color: rgba(var(--color-brand), 0.1); }
    .bg-amber-500\/20  { background-color: rgba(var(--color-brand), 0.2); }
    .bg-amber-500\/30  { background-color: rgba(var(--color-brand), 0.25); }
    .bg-red-500\/10    { background-color: rgba(239, 68, 68, 0.1); }
    .bg-red-500\/20    { background-color: rgba(239, 68, 68, 0.15); }
    .bg-red-500\/90    { background-color: rgba(239, 68, 68, 0.7); }
    .bg-green-500\/10  { background-color: rgba(34, 197, 94, 0.1); }
    .bg-green-500\/20  { background-color: rgba(34, 197, 94, 0.15); }
    .bg-neutral-600    { background-color: #d1d5db; }
    .from-\[\#0a0a0a\] {
        --tw-gradient-from: var(--lm-bg) var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(252, 252, 248, 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }
    .via-\[\#0a0a0a\]\/40 {
        --tw-gradient-via: rgba(252, 252, 248, 0.4) var(--tw-gradient-via-position);
        --tw-gradient-to: rgba(252, 252, 248, 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }
    .bg-gradient-to-l.from-black\/70.via-black\/40 {
        background-image: linear-gradient(to left, rgba(0,0,0,0.35), rgba(0,0,0,0.15), rgba(0,0,0,0.05));
    }
    .bg-gradient-to-t.from-black\/80.via-black\/20 {
        background-image: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.1), transparent);
    }
    .bg-gradient-to-t.from-black\/60 {
        background-image: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
    }
    .bg-gradient-to-l.from-black\/70.via-black\/40.to-black\/30 {
        background-image: linear-gradient(to left, rgba(0,0,0,0.35), rgba(0,0,0,0.15), rgba(0,0,0,0.05));
    }
    .bg-gradient-to-t.from-\[\#0a0a0a\] ~ .relative .text-white,
    .bg-gradient-to-t ~ .relative .text-white { color: var(--lm-text); }
    .text-white          { color: var(--lm-text); }
    .text-white\/70      { color: rgba(15, 23, 42, 0.7); }
    .text-neutral-300,
    .text-neutral-300\/90 { color: var(--lm-text-mid); }
    .text-neutral-400    { color: var(--lm-text-muted); }
    .text-neutral-500    { color: var(--lm-text-faint); }
    .text-neutral-600    { color: var(--lm-text-faint); }
    .text-neutral-700    { color: #334155; }
    .text-\[\#171717\]   { color: #0f172a; }
    .text-\[\#0a0a0a\]   { color: #0f172a; }
    a.bg-amber-500 > .text-white,
    button.bg-amber-500 .text-white,
    [class*="bg-amber"] .text-white,
    [class*="bg-green"] .text-white,
    [class*="bg-red"] .text-white,
    [class*="bg-rose"] .text-white,
    .arcsys-btn .text-white,
    button .iconify.text-white,
    span.iconify.text-white { color: inherit; }
    .text-link            { color: var(--arcsys-link); }
    .hover\:text-link-hover:hover { color: var(--arcsys-link-hover); }
    .hover\:text-white:hover                { color: var(--lm-text); }
    .hover\:text-white\/70:hover            { color: rgba(15, 23, 42, 0.7); }
    .group:hover .group-hover\:text-white   { color: var(--lm-text); }
    .hover\:text-red-400:hover              { color: var(--lm-danger-text); }
    .hover\:text-red-300:hover              { color: var(--lm-danger-text); }
    input.text-white::placeholder,
    textarea.text-white::placeholder { color: var(--lm-text-faint); }
    .placeholder-neutral-500::placeholder { color: var(--lm-text-faint); }
    input.bg-white\/5::placeholder { color: var(--lm-text-faint); }
    .border-white\/5,
    .border-b.border-white\/5,
    .border-t.border-white\/5    { border-color: var(--lm-border-sof); }
    .border-white\/10,
    .border-l.border-white\/10,
    .border-x.border-white\/10,
    .border-t.border-white\/10,
    .border-b.border-white\/10   { border-color: var(--lm-border); }
    .border-white\/20            { border-color: rgba(0, 0, 0, 0.12); }
    .border-white\/30            { border-color: rgba(0, 0, 0, 0.18); }
    .border-neutral-800          { border-color: rgba(0, 0, 0, 0.12); }
    .border-neutral-800\/60      { border-color: var(--lm-border); }
    .divide-white\/5 > * + *     { border-top-color: var(--lm-border-sof); }
    .divide-white\/10 > * + *    { border-top-color: var(--lm-border); }
    .hover\:border-white\/20:hover     { border-color: rgba(0, 0, 0, 0.12); }
    .hover\:border-amber-500\/20:hover { border-color: rgba(var(--color-brand), 0.2); }
    .hover\:border-amber-500\/30:hover { border-color: rgba(var(--color-brand), 0.3); }
    .hover\:border-amber-500\/40:hover { border-color: rgba(var(--color-brand), 0.4); }
    .hover\:border-amber-500\/50:hover { border-color: rgba(var(--color-brand), 0.5); }
    .hover\:border-red-400\/30:hover   { border-color: rgba(248,113,113,0.3); }
    .group:hover .group-hover\:border-amber-500\/30 { border-color: rgba(var(--color-brand), 0.3); }
    .focus\:ring-amber-500\/50:focus       { --tw-ring-color: rgba(var(--color-brand), 0.5); }
    .focus\:ring-amber-500\/30:focus       { --tw-ring-color: rgba(var(--color-brand), 0.3); }
    .focus\:border-amber-500\/50:focus     { border-color: rgba(var(--color-brand), 0.5); }
    .focus-within\:ring-amber-500\/50:focus-within { --tw-ring-color: rgba(var(--color-brand), 0.5); }
    .focus-within\:border-amber-500\/50:focus-within { border-color: rgba(var(--color-brand), 0.5); }
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    .backdrop-blur-xl    { backdrop-filter: none; }
    .prose.prose-invert               { color: #334155; }
    .prose.prose-invert h1,
    .prose.prose-invert h2,
    .prose.prose-invert h3,
    .prose.prose-invert h4            { color: var(--lm-text); }
    .prose.prose-invert a             { color: var(--arcsys-link); }
    .prose.prose-invert strong        { color: var(--lm-text); }
    .prose.prose-invert code          { background-color: var(--lm-elevated); color: #334155; }
    .prose.prose-invert blockquote    { border-left-color: rgba(0,0,0,0.15); color: #64748b; }
    .prose.prose-invert li::marker    { color: #94a3b8; }
    .bg-\[\#171717\].border-b     { border-bottom-color: var(--lm-border); }
    nav.bg-\[\#0a0a0a\]           { background-color: var(--lm-surface); }
    header.bg-\[\#0a0a0a\]\/95    { background-color: var(--lm-surface); }
    .fixed.inset-0.bg-\[\#0a0a0a\]\/98 { background-color: rgba(255, 255, 255, 0.98); }
    .product-card                                    { background-color: var(--lm-surface); }
    .product-card.bg-white\/5                        { background-color: var(--lm-surface); }
    .product-card.bg-white\/5.border-white\/10       { border-color: var(--lm-border); }
    .product-card h3,
    .product-card h3 a                               { color: #000000; }
    .product-card:hover h3 a                         { color: var(--arcsys-link); }
    footer .bg-\[\#171717\]         { background-color: var(--lm-elevated); }
    footer .bg-\[\#0a0a0a\]         { background-color: var(--lm-bg); }
    footer .bg-\[\#050505\]         { background-color: var(--lm-elevated); }
    footer.border-t.border-neutral-800 { border-top-color: var(--lm-border); }
    footer .border-neutral-800      { border-color: var(--lm-border); }
    footer .text-white              { color: #000000; }
    footer h4                       { color: #000000; }
    .bg-\[\#171717\]\/30 h2.font-display { color: #000000; }
    section.bg-\[\#050505\]         { background-color: var(--lm-elevated); }
    section.bg-\[\#050505\].border-t.border-neutral-800\/60 { border-top-color: var(--lm-border); }
    .bg-\[\#171717\].border.border-neutral-800 {
        background-color: var(--lm-surface);
        border-color: var(--lm-border);
    }
    .border-t.border-neutral-800\/60 { border-top-color: var(--lm-border); }
    section[aria-label*="مقالات"]   { background-color: var(--lm-elevated); }
    input.bg-white\/5,
    select.bg-white\/5              { background-color: var(--lm-input-bg); border-color: var(--lm-input-border); }
    input.bg-white\/5:hover,
    select.bg-white\/5:hover        { border-color: var(--lm-input-border-hover); }
    input.bg-white\/5:focus,
    select.bg-white\/5:focus        { border-color: var(--arcsys-brand); box-shadow: 0 0 0 3px rgba(var(--color-brand), 0.18); }
    input.text-white,
    select.text-white               { color: #0f172a; }
    select.text-white option        { color: #0f172a; background: #fff; }
    input.bg-white\/5::placeholder  { color: var(--lm-text-faint); }
    .arcsys-table th                              { color: rgba(0,0,0,0.6); border-bottom-color: rgba(0,0,0,0.1); }
    .arcsys-table td                              { color: rgba(0,0,0,0.75); border-bottom-color: rgba(0,0,0,0.08); }
    .arcsys-table tbody tr:hover                  { background: rgba(0,0,0,0.03); }
    .arcsys-table tr.bg-white\/\[0\.02\]          { background: var(--lm-glass-2); }
    .scrollbar-hide::-webkit-scrollbar-track      { background: var(--lm-elevated); }
    .scrollbar-thin::-webkit-scrollbar-track      { background: transparent; }
    .scrollbar-thin::-webkit-scrollbar-thumb      { background: rgba(0, 0, 0, 0.15); border-radius: 9999px; }
    .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
    [\&::-webkit-slider-thumb]\:border-\[\#0a0a0a\]::-webkit-slider-thumb {
        border-color: var(--lm-surface);
    }
    [\&::-webkit-slider-thumb]\:bg-amber-500::-webkit-slider-thumb {
        background-color: var(--arcsys-brand);
    }
    .bg-white\/10.peer-checked\:bg-amber-500\/30 {
        background-color: var(--lm-glass-8);
    }
    .peer:checked ~ .peer-checked\:bg-amber-500\/30 {
        background-color: rgba(var(--color-brand), 0.25);
    }
    .bg-white\/5.rounded-2xl.flex { background-color: var(--lm-glass-5); }
    .bg-red-500.text-white { color: #ffffff; }
    .bg-white\/20.backdrop-blur { background-color: rgba(0, 0, 0, 0.1); }
    [class*="shadow-"]          { --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color); }
    .bg-amber-500\/5.border.border-dashed.border-white\/10 { border-color: var(--lm-border); background-color: rgba(var(--color-brand), 0.05); }
    .bg-black\/60               { background-color: rgba(0, 0, 0, 0.3); }
    .from-amber-500\/10         { --tw-gradient-from: rgba(var(--color-brand), 0.1) var(--tw-gradient-from-position); }
    .from-amber-500\/5          { --tw-gradient-from: rgba(var(--color-brand), 0.05) var(--tw-gradient-from-position); }
    .via-white\/\[0\.02\]        { --tw-gradient-via: rgba(0,0,0,0.02) var(--tw-gradient-via-position); }

    /* ── Image outlines: pure black at 10% in light mode (main.css sets white) ── */
    .product-card__image img,
    .product-img,
    .cat-cell__image img,
    .cat-track-img,
    .zoom-img { outline-color: rgb(0 0 0 / 0.1); }

    /* ═══════════════════════════════════════════════════════════════
       main.css component overrides — surfaces/text that hardcode dark
       values and never had a light-mode counterpart
       ═══════════════════════════════════════════════════════════════ */

    /* Skeleton shimmer: white-based shimmers are invisible on light surfaces */
    --shimmer-from: rgba(0, 0, 0, 0.04);
    --shimmer-via: rgba(0, 0, 0, 0.1);
    --shimmer-to: rgba(0, 0, 0, 0.04);

    /* Category-carousel edge fade: main.css hardcodes a #0a0a0a gradient */
    .arcsys-carousel-fade-left {
        background: linear-gradient(
            to right,
            #fcfcf8 0%,
            #fcfcf8 25%,
            rgba(252, 252, 248, 0.7) 55%,
            rgba(252, 252, 248, 0) 100%
        );
    }

    /* Native select dropdown options (main.css pins them to #171717) */
    .swiss-select option { background: #ffffff; color: #0f172a; }

    /* Swiss form controls */
    .swiss-input,
    .swiss-select {
        background-color: var(--lm-input-bg);
        border-color: var(--lm-input-border);
        color: var(--lm-text);
    }
    .swiss-input:hover,
    .swiss-select:hover { border-color: var(--lm-input-border-hover); }
    .swiss-input:focus,
    .swiss-select:focus { border-color: var(--arcsys-brand); box-shadow: 0 0 0 3px rgba(var(--color-brand), 0.18); }
    .swiss-input::placeholder,
    .swiss-select::placeholder { color: var(--lm-text-faint); }
    .swiss-check { border-color: rgba(0, 0, 0, 0.2); }

    /* Pagination numbers (main.css component styles) */
    .nav-links .page-numbers {
        color: rgba(0, 0, 0, 0.65);
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
    }
    .nav-links .page-numbers:hover {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.85);
    }
    .nav-links .page-numbers.dots { background: transparent; border-color: transparent; }

    /* Button variants that sit on light surfaces */
    .arcsys-btn--secondary { background: rgba(0, 0, 0, 0.08); color: var(--lm-text); }
    .arcsys-btn--secondary:hover { background: rgba(0, 0, 0, 0.12); }
    .arcsys-btn--outline { border-color: rgba(0, 0, 0, 0.2); color: var(--lm-text); }
    .arcsys-btn--outline:hover { border-color: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.04); }
    .arcsys-btn--ghost { color: rgba(0, 0, 0, 0.65); }
    .arcsys-btn--ghost:hover { background: rgba(0, 0, 0, 0.05); color: var(--lm-text); }

    /* Carousel nav circles (main.css: white 5% bg, white icon — invisible on light) */
    .arcsys-carousel-nav {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
        color: var(--lm-text);
    }

    /* Account-menu nav items (header dropdown) */
    .arcsys-nav-item { color: var(--lm-text-mid); }
    .arcsys-nav-item:hover { background: rgba(0, 0, 0, 0.05); color: var(--lm-text); }

    /* Badges */
    .arcsys-badge--neutral { background: rgba(0, 0, 0, 0.08); color: var(--lm-text-mid); }
    .out-of-stock-badge { background: rgba(0, 0, 0, 0.08); color: var(--lm-text-mid); }

    /* Spinner track */
    .spinner { border-color: rgba(0, 0, 0, 0.1); border-top-color: var(--arcsys-brand); }

    /* WooCommerce quantity input (main.css pins it to white-on-dark) */
    .woocommerce .quantity .qty {
        background: var(--lm-input-bg);
        border-color: var(--lm-input-border);
        color: var(--lm-text);
    }

    /* Product image placeholder surface */
    .product-card__image { background-color: rgba(0, 0, 0, 0.03); }

    /* ── Utility gaps found by template audit ── */
    .focus\:bg-white\/\[0\.07\]:focus { background-color: rgba(0, 0, 0, 0.04); }
    .text-white\/5 { color: rgba(0, 0, 0, 0.05); }
    .placeholder\:text-neutral-500::placeholder { color: var(--lm-text-faint); }

    /* Toast: keep text white on emerald/sky success surfaces (like green/red above) */
    [class*="bg-emerald"].text-white,
    [class*="bg-sky"].text-white { color: #ffffff; }
    [class*="bg-emerald"] .text-white,
    [class*="bg-sky"] .text-white { color: inherit; }

    /* ═══════════════════════════════════════════════════════════════
       Text contrast pass — brand & semantic colors.
       The dark-first design uses amber/green/red/sky TEXT on black
       (passes there); raw values fail 4.5:1 on light surfaces, so
       every colored-text utility maps to a darkened variant.
       Backgrounds keep the raw brand color (dark text on amber bg
       is unaffected). Specificity (0,2,0)+ beats settings `body …`
       (0,1,1) and hover/group variants likewise.
       ═══════════════════════════════════════════════════════════════ */
    .text-amber-400,
    .text-amber-500                { color: var(--lm-brand-text); }
    .text-amber-500\/60,
    .text-amber-500\/80            { color: var(--lm-brand-text); }
    .hover\:text-amber-300:hover,
    .hover\:text-amber-400:hover,
    .hover\:text-amber-500:hover   { color: var(--lm-brand-text-strong); }
    .group:hover .group-hover\:text-amber-400,
    .group:hover .group-hover\:text-amber-500 { color: var(--lm-brand-text); }
    .text-link                     { color: var(--lm-brand-text); }
    .hover\:text-link-hover:hover  { color: var(--lm-brand-text-strong); }

    .text-green-400,
    .text-green-500                { color: var(--lm-success-text); }
    .text-green-400\/70            { color: color-mix(in srgb, var(--lm-success-text) 88%, transparent); }
    .text-emerald-400              { color: #047857; }

    .text-red-400,
    .text-red-300                  { color: var(--lm-danger-text); }

    .text-sky-400                  { color: var(--lm-info-text); }
    .text-sky-400\/70              { color: color-mix(in srgb, var(--lm-info-text) 88%, transparent); }
    .text-blue-400                 { color: #1d4ed8; }
    .text-rose-400                 { color: #be123c; }

    /* opacity-40 dimmed controls (builder step nav, brand marquee) are
       neutralized in main.css — it fails contrast in both themes. */

    /* ═══════════════════════════════════════════════════════════════
       Input redesign — dark-theme overlay fills (bg-black/60 on the
       builder toolbar, bg-white/10 on the newsletter) turn into murky
       gray slabs in light mode. Redesign: white surface, hairline
       border, amber focus ring. Scoped to inputs, so scrim overlays
       using the same classes are untouched.
       ═══════════════════════════════════════════════════════════════ */
    input.bg-black\/60,
    input.bg-white\/10 {
        background-color: var(--lm-input-bg);
        border-color: var(--lm-input-border);
        color: var(--lm-text);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    input.bg-black\/60:hover,
    input.bg-white\/10:hover { border-color: var(--lm-input-border-hover); }
    input.bg-black\/60:focus,
    input.bg-white\/10:focus {
        border-color: var(--arcsys-brand);
        box-shadow: 0 0 0 3px rgba(var(--color-brand), 0.18);
        outline: none;
    }
    input.bg-black\/60::placeholder,
    input.bg-white\/10::placeholder { color: var(--lm-text-faint); }
}