/* ============================================================
 * sp-tokens.css — Design System v2 (Yut 2026-05-16)
 * Single source of truth for ALL theme × mode color tokens.
 * Loaded AFTER sp-mobile.css so it wins the cascade.
 *
 * Architecture:
 *   Each token has ONE semantic role. No overloading.
 *   --sp-primary      = brand accent for TEXT/icon/border ONLY
 *   --sp-cta-bg       = CTA button background (independent of primary)
 *   --sp-cta-on       = text color when sitting on cta-bg
 *   --sp-cta-sec-bg   = secondary CTA bg
 *   --sp-cta-sec-on   = secondary CTA text
 *   --sp-bg/surface/text/text-dim/text-muted/border = layout neutrals
 *   --sp-success/warning/danger/info + -on = semantic states
 *
 * The KEY fix: in theme-gray.mode-dark we KEEP cta-bg dark while letting
 * primary flip to near-white. This stops the white-on-white CTA bug WITHOUT
 * needing 24 per-class !important overrides for every button.
 * ============================================================ */

/* ====== LAYOUT NEUTRALS (mode-driven, theme-independent) ====== */
:root,
body.mode-light {
    --sp-bg:           #f5f5f5;
    --sp-surface:      #ffffff;
    --sp-surface-2:    #fafafa;
    --sp-surface-3:    #f3f4f6;
    --sp-text:         #171717;   /* primary text — 17.4:1 vs surface */
    --sp-text-dim:     #525252;   /* secondary — 7.5:1 vs surface (was #666 = 5.7:1) */
    --sp-text-muted:   #737373;   /* tertiary — 4.8:1 */
    --sp-border:       #e5e5e5;
    --sp-border-strong:#d4d4d4;
    --sp-shadow:       0 2px 8px rgba(0,0,0,.05);
    --sp-overlay:      rgba(0,0,0,.5);

    /* Semantic state colors */
    --sp-success:      #16a34a;
    --sp-success-on:   #ffffff;
    --sp-success-bg:   #f0fdf4;
    --sp-warning:      #ca8a04;
    --sp-warning-on:   #ffffff;
    --sp-warning-bg:   #fffbeb;
    --sp-danger:       #dc2626;
    --sp-danger-on:    #ffffff;
    --sp-danger-bg:    #fef2f2;
    --sp-info:         #0284c7;
    --sp-info-on:      #ffffff;
    --sp-info-bg:      #f0f9ff;

    /* Default brand-on color when sitting on a primary-painted surface */
    --sp-primary-on:   #ffffff;
}

body.mode-dark,
body.mode-auto.is-os-dark {
    --sp-bg:           #0a0a0a;
    --sp-surface:      #171717;
    --sp-surface-2:    #262626;
    --sp-surface-3:    #2d2d2d;
    --sp-text:         #fafafa;   /* 18.7:1 vs surface */
    --sp-text-dim:     #cccccc;   /* 11.6:1 (was #999 = 5.1:1 — fixed: mycart dim labels) */
    --sp-text-muted:   #a3a3a3;   /* 6.8:1 */
    --sp-border:       #404040;
    --sp-border-strong:#525252;
    --sp-shadow:       0 2px 8px rgba(0,0,0,.4);
    --sp-overlay:      rgba(0,0,0,.7);

    --sp-success:      #22c55e;
    --sp-success-on:   #052e16;
    --sp-success-bg:   #052e16;
    --sp-warning:      #fbbf24;
    --sp-warning-on:   #422006;
    --sp-warning-bg:   #422006;
    --sp-danger:       #f87171;
    --sp-danger-on:    #450a0a;
    --sp-danger-bg:    #450a0a;
    --sp-info:         #38bdf8;
    --sp-info-on:      #082f49;
    --sp-info-bg:      #082f49;

    --sp-primary-on:   #ffffff;
}

/* ====== BRAND TOKENS PER THEME (mode-independent unless overridden) ====== */
/* Default theme = orange (Shopee parity) */
:root,
body.theme-orange {
    --sp-primary:       #ee4d2d;
    --sp-primary-light: #fb8c1f;
    --sp-primary-dark:  #c84411;
    --sp-primary-bg:    #fff5f0;
    --sp-cta-bg:        #ee4d2d;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #fff5f0;
    --sp-cta-sec-on:    #ee4d2d;
}
body.theme-orange.mode-dark,
body.theme-orange.mode-auto.is-os-dark {
    --sp-primary:       #fb923c;
    --sp-primary-light: #fdba74;
    --sp-primary-dark:  #ea580c;
    --sp-primary-bg:    #431407;
    --sp-cta-bg:        #ea580c;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #431407;
    --sp-cta-sec-on:    #fb923c;
}

body.theme-red {
    --sp-primary:       #dc2626;
    --sp-primary-light: #ef4444;
    --sp-primary-dark:  #991b1b;
    --sp-primary-bg:    #fef2f2;
    --sp-cta-bg:        #dc2626;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #fef2f2;
    --sp-cta-sec-on:    #dc2626;
}
body.theme-red.mode-dark,
body.theme-red.mode-auto.is-os-dark {
    --sp-primary:       #f87171;
    --sp-primary-light: #fca5a5;
    --sp-primary-dark:  #dc2626;
    --sp-primary-bg:    #450a0a;
    --sp-cta-bg:        #dc2626;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #450a0a;
    --sp-cta-sec-on:    #f87171;
}

body.theme-yellow {
    --sp-primary:       #ca8a04;
    --sp-primary-light: #eab308;
    --sp-primary-dark:  #854d0e;
    --sp-primary-bg:    #fffbeb;
    --sp-cta-bg:        #ca8a04;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #fffbeb;
    --sp-cta-sec-on:    #854d0e;
}
body.theme-yellow.mode-dark,
body.theme-yellow.mode-auto.is-os-dark {
    --sp-primary:       #facc15;
    --sp-primary-light: #fde047;
    --sp-primary-dark:  #ca8a04;
    --sp-primary-bg:    #422006;
    --sp-cta-bg:        #ca8a04;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #422006;
    --sp-cta-sec-on:    #facc15;
}

body.theme-green {
    --sp-primary:       #16a34a;
    --sp-primary-light: #22c55e;
    --sp-primary-dark:  #15803d;
    --sp-primary-bg:    #f0fdf4;
    --sp-cta-bg:        #16a34a;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #f0fdf4;
    --sp-cta-sec-on:    #15803d;
}
body.theme-green.mode-dark,
body.theme-green.mode-auto.is-os-dark {
    --sp-primary:       #4ade80;
    --sp-primary-light: #86efac;
    --sp-primary-dark:  #16a34a;
    --sp-primary-bg:    #052e16;
    --sp-cta-bg:        #16a34a;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #052e16;
    --sp-cta-sec-on:    #4ade80;
}

body.theme-blue {
    --sp-primary:       #2563eb;
    --sp-primary-light: #3b82f6;
    --sp-primary-dark:  #1d4ed8;
    --sp-primary-bg:    #eff6ff;
    --sp-cta-bg:        #2563eb;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #eff6ff;
    --sp-cta-sec-on:    #1d4ed8;
}
body.theme-blue.mode-dark,
body.theme-blue.mode-auto.is-os-dark {
    --sp-primary:       #60a5fa;
    --sp-primary-light: #93c5fd;
    --sp-primary-dark:  #2563eb;
    --sp-primary-bg:    #172554;
    --sp-cta-bg:        #2563eb;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #172554;
    --sp-cta-sec-on:    #60a5fa;
}

body.theme-purple {
    --sp-primary:       #7c3aed;
    --sp-primary-light: #a855f7;
    --sp-primary-dark:  #6b21a8;
    --sp-primary-bg:    #faf5ff;
    --sp-cta-bg:        #7c3aed;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #faf5ff;
    --sp-cta-sec-on:    #7c3aed;
}
body.theme-purple.mode-dark,
body.theme-purple.mode-auto.is-os-dark {
    --sp-primary:       #a78bfa;
    --sp-primary-light: #c4b5fd;
    --sp-primary-dark:  #7c3aed;
    --sp-primary-bg:    #2e1065;
    --sp-cta-bg:        #7c3aed;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #2e1065;
    --sp-cta-sec-on:    #a78bfa;
}

body.theme-pink {
    --sp-primary:       #db2777;
    --sp-primary-light: #ec4899;
    --sp-primary-dark:  #9d174d;
    --sp-primary-bg:    #fdf2f8;
    --sp-cta-bg:        #db2777;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #fdf2f8;
    --sp-cta-sec-on:    #db2777;
}
body.theme-pink.mode-dark,
body.theme-pink.mode-auto.is-os-dark {
    --sp-primary:       #f472b6;
    --sp-primary-light: #f9a8d4;
    --sp-primary-dark:  #db2777;
    --sp-primary-bg:    #500724;
    --sp-cta-bg:        #db2777;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #500724;
    --sp-cta-sec-on:    #f472b6;
}

/* ====== THEME-GRAY (black) — SPECIAL: primary serves text role,
   cta-bg stays dark so buttons remain readable in BOTH modes. ====== */
body.theme-gray {
    --sp-primary:       #171717;   /* near-black — text/icon accent in light */
    --sp-primary-light: #404040;
    --sp-primary-dark:  #000000;
    --sp-primary-bg:    #f3f4f6;
    --sp-cta-bg:        #000000;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #f3f4f6;
    --sp-cta-sec-on:    #000000;
}
body.theme-gray.mode-dark,
body.theme-gray.mode-auto.is-os-dark {
    --sp-primary:       #fafafa;   /* near-white — text/icon accent in dark */
    --sp-primary-light: #ffffff;
    --sp-primary-dark:  #d4d4d4;
    --sp-primary-bg:    #262626;
    /* CRITICAL: cta-bg stays BLACK even in dark mode — avoids white-on-white */
    --sp-cta-bg:        #000000;
    --sp-cta-on:        #ffffff;
    --sp-cta-sec-bg:    #262626;
    --sp-cta-sec-on:    #fafafa;
}

/* ====== GLOBAL CTA RULES — use new tokens, retire per-class !important ======
   Any element matching a CTA-like class gets cta-bg/cta-on automatically.
   This covers the 24+ classes that previously needed `body.theme-gray .X { background:#000 !important; color:#fff !important; }` overrides. */
.sp-cta-pri,
.sp-cart-checkout,
.sp-cart-checkout-btn,
.sp-buy-sheet-buy-btn,
.sp-vfeed-cta,
.sp-vfeed-cta-btn,
.sp-vfeed-pick-btn,
.sp-vfeed-buysheet-buy-btn,
.sp-auth-btn,
.sp-empty-cta,
.sp-coupon-pick-btn,
.sp-coupon-apply,
.sp-coupon-use-btn,
.sp-cart-buy,
.sp-cart-pick-btn,
.sp-confirm-ok,
.sp-addr-submit,
.sp-freebox-pick,
.sp-bb-cta,
.sp-orderlist-cta-pri,
.sp-orddetail-cta-pri,
.sp-orddetail-pay-cta,
.sp-orddetail-notify-btn,
.sp-upc-btn-cart,
.sp-coupon-collect-btn {
    background: var(--sp-cta-bg) !important;
    background-image: none !important;
    color: var(--sp-cta-on) !important;
    border-color: var(--sp-cta-bg) !important;
}
/* Coupon ticket "stub" on left side — follows brand color, not hardcoded #c2410c */
.sp-coupon-left {
    background: var(--sp-cta-bg) !important;
    color: var(--sp-cta-on) !important;
}
/* Coupon collected state — semantic success */
.sp-coupon-collect-btn.done,
.sp-coupon-collect-btn.is-collected {
    background: var(--sp-success) !important;
    color: var(--sp-success-on) !important;
    border-color: var(--sp-success) !important;
}
/* Force descendant text/icons inside CTAs to match cta-on (Yut: ปุ่มต้องอ่านออกแน่ๆ) */
.sp-cta-pri *,
.sp-cart-checkout *,
.sp-cart-checkout-btn *,
.sp-buy-sheet-buy-btn *,
.sp-vfeed-cta *,
.sp-auth-btn *,
.sp-empty-cta *,
.sp-coupon-pick-btn *,
.sp-coupon-apply *,
.sp-cart-buy *,
.sp-confirm-ok *,
.sp-addr-submit *,
.sp-orderlist-cta-pri *,
.sp-orddetail-cta-pri *,
.sp-orddetail-pay-cta *,
.sp-orddetail-notify-btn * {
    color: var(--sp-cta-on);
}

/* Secondary CTAs (outline/ghost) */
.sp-cta-sec,
.sp-orderlist-cta-info,
.sp-orderlist-cta-sec,
.sp-orddetail-cta-sec,
.sp-orddetail-back-link {
    background: var(--sp-cta-sec-bg);
    color: var(--sp-cta-sec-on);
    border: 1px solid var(--sp-border);
}

/* ====== UTILITY OVERRIDES (used by component CSS) ====== */
/* Fix the most common dim-text-in-dark complaint — body.mode-dark .sp-text-dim
   was rendering #999 which fails AA on small text. Force to text-dim token. */
body.mode-dark .sp-text-dim,
body.mode-auto.is-os-dark .sp-text-dim {
    color: var(--sp-text-dim);
}

/* Cart/checkout dim labels — bumped contrast (Yut 2026-05-16 mycart screenshot) */
body.mode-dark .sp-checkout-row .lbl,
body.mode-dark .sp-checkout-row-label,
body.mode-dark .sp-coupon-input-label,
body.mode-dark .sp-cart-summary-label,
body.mode-auto.is-os-dark .sp-checkout-row .lbl,
body.mode-auto.is-os-dark .sp-checkout-row-label {
    color: var(--sp-text) !important;   /* full contrast for important labels */
}

/* ============================================================
 * End of sp-tokens.css
 * To add a new theme: copy a `body.theme-X { ... }` block above
 * and ensure cta-bg + cta-on contrast ≥ 4.5:1.
 * Audit visually at /design-tokens (swatch page).
 * ============================================================ */