/* theme-light.css — ขาว-น้ำเงิน (สีตามโลโก้ TH Shops จริง) — ค่าเริ่มต้นของเว็บ (light-mode-first)
   ใช้ bare :root (ไม่ผูกกับ [data-theme]) เพื่อให้เป็นค่า default แม้ JS ปิดอยู่ก็ตาม
   theme-dark.css จะ override ทับด้วย [data-theme="dark"] เมื่อผู้ใช้กดสลับเท่านั้น */
:root {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F4F5;
  --color-surface-glass: rgba(255, 255, 255, 0.86);
  --color-primary: #3231C3;
  --color-primary-strong: #24228A;
  --color-secondary: #6B7280;
  --color-secondary-strong: #374151;
  --color-accent: #3231C3;
  --color-accent-strong: #24228A;
  --color-success: #15803D;
  --color-success-strong: #166534;
  --color-warning: #C2410C;
  --color-warning-strong: #9A3412;
  --color-error: #DC2626;
  --color-error-strong: #B91C1C;
  --color-text: #1A1A1A;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;

  --glow-color: 50, 49, 195;
  --shadow-color: 20, 20, 30;
  --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 6px 16px rgba(var(--shadow-color), 0.08);
  --shadow-lg: 0 14px 30px rgba(var(--shadow-color), 0.12);
  --glow-sm: 0 0 0 rgba(0,0,0,0);
  --glow-md: 0 0 0 rgba(0,0,0,0);

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  --grid-line: transparent;

  --motion-instant: 300ms;
  --focus-ring: 0 0 0 3px rgba(50, 49, 195, 0.35);

  /* น้ำเงินเข้มพอทั้งเป็นตัวอักษรและพื้นปุ่มตัวอักษรขาวได้เลย ไม่ต้องแยกเฉดเหมือนธีมก่อนหน้า */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-strong: var(--color-primary-strong);
  --btn-danger-bg: var(--color-error);
  --btn-danger-bg-strong: var(--color-error-strong);
}