/* ══════════════════════════════════════════════════════
   24 TOPUP — Custom Theme
   Override TemplUI default tokens → 24 Topup brand values
   โครงสร้างตาม templui/assets/css/themes.css
   24 Topup = Light only (ไม่มี .dark)
══════════════════════════════════════════════════════ */

:root {
  /* ── Radius ───────────────────────────────────────── */
  --radius: 0.875rem;

  /* ── Semantic surface ─────────────────────────────── */
  --background:            #f5f3ff;
  --foreground:            #3b1f69;
  --card:                  #ffffff;
  --card-foreground:       #3b1f69;
  --popover:               #ffffff;
  --popover-foreground:    #3b1f69;

  /* ── Brand ────────────────────────────────────────── */
  --primary:               #7c3aed;
  --primary-foreground:    #ffffff;

  /* ── Secondary / Muted / Accent ──────────────────── */
  --secondary:             #ede9fe;
  --secondary-foreground:  #5b21b6;
  --muted:                 #ede9fe;
  --muted-foreground:      #9d7ec9;
  --accent:                #ede9fe;
  --accent-foreground:     #4c2d82;

  /* ── Destructive ──────────────────────────────────── */
  --destructive:           #ef4444;

  /* ── Border / Input / Ring ────────────────────────── */
  --border:                rgba(13,10,35,.08);
  --input:                 rgba(124,58,237,.14);
  --ring:                  #7c3aed;

  /* ── Sidebar ──────────────────────────────────────── */
  --sidebar:                    #1a0533;
  --sidebar-foreground:         rgba(255,255,255,.9);
  --sidebar-primary:            #7c3aed;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent:             rgba(124,58,237,.25);
  --sidebar-accent-foreground:  #ffffff;
  --sidebar-border:             rgba(255,255,255,.08);
  --sidebar-ring:               #7c3aed;

  /* ── Selection ────────────────────────────────────── */
  --selection:             #7c3aed;
  --selection-foreground:  #ffffff;

}

/* ══════════════════════════════════════════════════════
   DARK MODE — dark purple-gray palette (ไม่ดำปิ๊ด)
   Toggle: document.documentElement.classList.toggle('dark')
   Persist: localStorage.theme = 'dark' | 'light'
══════════════════════════════════════════════════════ */

:root.dark {
  /* ── Surfaces ─────────────────────────────────────── */
  --background:            #1e1b2e;  /* dark purple-gray */
  --foreground:            #e8e0f7;  /* near-white ม่วงอ่อน */
  --card:                  #252235;  /* surface สว่างกว่า bg */
  --card-foreground:       #e8e0f7;
  --popover:               #252235;
  --popover-foreground:    #e8e0f7;

  /* ── Brand ────────────────────────────────────────── */
  --primary:               #a78bfa;  /* violet สว่างขึ้น — contrast บน dark */
  --primary-foreground:    #1e1b2e;

  /* ── Secondary / Muted / Accent ──────────────────── */
  --secondary:             #312b50;
  --secondary-foreground:  #ddd6fe;
  --muted:                 #2a2640;
  --muted-foreground:      #b39ddb;
  --accent:                #312b50;
  --accent-foreground:     #e8e0f7;

  /* ── Destructive ──────────────────────────────────── */
  --destructive:           #f87171;  /* red สว่างขึ้นเล็กน้อย */

  /* ── Border / Input / Ring ────────────────────────── */
  --border:                rgba(167,139,250,.15);
  --input:                 rgba(167,139,250,.12);
  --ring:                  #a78bfa;

  /* ── Sidebar ──────────────────────────────────────── */
  --sidebar:                    #16132a;  /* darker กว่า bg */
  --sidebar-foreground:         rgba(232,224,247,.9);
  --sidebar-primary:            #a78bfa;
  --sidebar-primary-foreground: #1e1b2e;
  --sidebar-accent:             rgba(167,139,250,.2);
  --sidebar-accent-foreground:  #e8e0f7;
  --sidebar-border:             rgba(167,139,250,.08);
  --sidebar-ring:               #a78bfa;

  /* ── Selection ────────────────────────────────────── */
  --selection:             #7c3aed;
  --selection-foreground:  #ffffff;
}