/* ============================================
   tokens.css — Design Tokens (CSS Variables)
   เปลี่ยนธีมแค่สลับ data-theme บน <html> ตัวเดียว
   ============================================ */

:root {
  /* --- ค่าที่ไม่ขึ้นกับธีม --- */
  --font-sans: "Prompt", "Segoe UI", "Sarabun", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px;

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* accent คงที่ทั้งสองธีม (น้ำเงิน-เทอร์ควอยซ์) */
  --accent:        #0ea5a4;
  --accent-hover:  #0c8c8b;
  --accent-soft:   rgba(14, 165, 164, 0.12);

  --danger:  #e1495b;
  --danger-soft: rgba(225, 73, 91, 0.12);
  --success: #16a34a;
  --warning: #d97706;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  --bg:           #eef1f6;
  --bg-gradient:  radial-gradient(1200px 600px at 80% -10%, #dfeefc 0%, transparent 60%),
                  radial-gradient(900px 500px at -10% 110%, #e3f7f5 0%, transparent 55%);
  --surface:      #ffffff;
  --surface-2:    #f6f8fb;
  --surface-3:    #eceff4;

  --text:         #16202e;
  --text-muted:   #5a6877;
  --text-faint:   #8a96a3;

  --border:       #e1e6ee;
  --border-soft:  #eef1f6;
  --border-strong:#cdd5e0;

  --input-bg:     #ffffff;
  --input-border: #d6dde7;

  --shadow-sm: 0 1px 2px rgba(16, 32, 46, 0.06);
  --shadow:    0 4px 16px rgba(16, 32, 46, 0.08);
  --shadow-lg: 0 18px 48px rgba(16, 32, 46, 0.14);

  --overlay: rgba(22, 32, 46, 0.42);
}

/* ---------- DARK ----------
   โทนเทาอมน้ำเงินกลาง ๆ (ไม่ใช่กรมท่าเข้มจัดแบบเดิม)
   4 ค่าหลัก (bg / surface / surface-2 / surface-3) มาจากที่ผู้ใช้กำหนด
   ค่าที่เหลือไล่ให้เข้าชุด: เส้นขอบอยู่ระหว่าง surface-2 กับ surface-3
   และตัวอักษรถูกลดความอมฟ้าลงให้เป็นเทากลางตามพื้น */
:root[data-theme="dark"] {
  --bg:           #1e222b;
  --bg-gradient:  radial-gradient(1200px 600px at 80% -10%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
                  radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 164, 0.06) 0%, transparent 55%);
  --surface:      #262b34;
  --surface-2:    #313742;
  --surface-3:    #3a4150;

  --text:         #e8ecf2;
  --text-muted:   #a2a9b6;
  --text-faint:   #79808f;

  --border:       #3a4150;
  --border-soft:  #2f353f;
  --border-strong:#4d5567;

  /* ช่องกรอกจมลงจากพื้นการ์ดเล็กน้อย — ไม่งั้นกลืนกับ .surface จนดูไม่ออกว่าพิมพ์ได้ */
  --input-bg:     #22262f;
  --input-border: #434b5b;

  /* เงาบนพื้นสว่างขึ้นต้องอ่อนลง ไม่งั้นกลายเป็นคราบดำรอบการ์ด */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.45);

  --overlay: rgba(12, 14, 18, 0.6);
}