/* ═══════════════════════════════════════════════════════
   color.css — Sara Design System
   แก้สีทั้งระบบได้จากไฟล์เดียว
   ใช้: <link rel="stylesheet" href="/color.css">
   เปลี่ยนธีม: document.documentElement.setAttribute('data-color','gold')
   ═══════════════════════════════════════════════════════ */

/* ── Base structural vars (ไม่เปลี่ยนตามธีม) ─────────── */
:root {
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 24px;
}

/* ══════════════════════════════════════════════════════
   1. น้ำตาลนวล — BROWN CREAM (default / current)
══════════════════════════════════════════════════════ */
:root,
[data-color="brown"] {
  --accent:       #B07840;
  --accent2:      #C08850;
  --accent-light: #FDF8F2;
  --accent-dark:  #7A5028;
  --success:      #6A8A4A;
  --success-light:#F0F5E8;
  --gray-bg:      #FDFAF6;
  --card:         #FFFFFF;
  --gray-border:  #EDE8E0;
  --text:         #3A2A1A;
  --text2:        #7A6A5A;
  --text3:        #B0A090;
  --shadow:       0 2px 12px rgba(100,60,20,0.08);
  /* alias ที่โค้ดเก่าใช้ */
  --red:          var(--accent);
  --red2:         var(--accent2);
  --red-light:    var(--accent-light);
  --green:        var(--success);
  --green-light:  var(--success-light);
}
[data-color="brown"][data-theme="dark"],
[data-color="brown"] [data-theme="dark"],
[data-theme="dark"]:root {
  --accent:       #C89A60;
  --accent2:      #D8AA70;
  --accent-light: #2A1E10;
  --accent-dark:  #E8C080;
  --success:      #80A860;
  --success-light:#1A2410;
  --gray-bg:      #18150F;
  --card:         #201A14;
  --gray-border:  #2E2620;
  --text:         #F0EAE0;
  --text2:        #A09080;
  --text3:        #706050;
  --shadow:       0 2px 12px rgba(0,0,0,0.4);
  --red:          var(--accent);
  --red2:         var(--accent2);
  --red-light:    var(--accent-light);
  --green:        var(--success);
  --green-light:  var(--success-light);
}

/* ══════════════════════════════════════════════════════
   2. ทองไข่ดำ — GOLD / EGG-BLACK
══════════════════════════════════════════════════════ */
[data-color="gold"] {
  --accent:       #C8A020;
  --accent2:      #D8B030;
  --accent-light: #FDF8E0;
  --accent-dark:  #907010;
  --success:      #70A840;
  --success-light:#EEF5E0;
  --gray-bg:      #FEFCF0;
  --card:         #FFFFFF;
  --gray-border:  #EAE4CC;
  --text:         #2A2000;
  --text2:        #706A40;
  --text3:        #A8A080;
  --shadow:       0 2px 12px rgba(100,80,0,0.10);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}
[data-color="gold"][data-theme="dark"] {
  --accent:       #D4B040;
  --accent2:      #E4C050;
  --accent-light: #201800;
  --accent-dark:  #F0D060;
  --success:      #80B840;
  --success-light:#142000;
  --gray-bg:      #0E0C00;
  --card:         #1A1600;
  --gray-border:  #2A2400;
  --text:         #F8F0D0;
  --text2:        #A09060;
  --text3:        #706840;
  --shadow:       0 2px 12px rgba(0,0,0,0.5);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}

/* ══════════════════════════════════════════════════════
   3. ชมพูจืด — SOFT PINK
══════════════════════════════════════════════════════ */
[data-color="pink"] {
  --accent:       #C47888;
  --accent2:      #D48898;
  --accent-light: #FDF0F2;
  --accent-dark:  #904858;
  --success:      #6A9878;
  --success-light:#EAF5EE;
  --gray-bg:      #FDF8F8;
  --card:         #FFFFFF;
  --gray-border:  #EEDDDF;
  --text:         #3A1A20;
  --text2:        #7A5A60;
  --text3:        #B09098;
  --shadow:       0 2px 12px rgba(120,40,60,0.08);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}
[data-color="pink"][data-theme="dark"] {
  --accent:       #D898A8;
  --accent2:      #E8A8B8;
  --accent-light: #280A14;
  --accent-dark:  #F0B8C8;
  --success:      #88B898;
  --success-light:#0A1E10;
  --gray-bg:      #180C10;
  --card:         #22141A;
  --gray-border:  #301820;
  --text:         #F4E8EC;
  --text2:        #A08088;
  --text3:        #706068;
  --shadow:       0 2px 12px rgba(0,0,0,0.4);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}

/* ══════════════════════════════════════════════════════
   4. ฟ้าน้ำเงิน — BLUE
══════════════════════════════════════════════════════ */
[data-color="blue"] {
  --accent:       #4A7AB5;
  --accent2:      #5A8AC5;
  --accent-light: #EEF4FC;
  --accent-dark:  #2A5A95;
  --success:      #4A9870;
  --success-light:#EAF5EE;
  --gray-bg:      #F4F8FD;
  --card:         #FFFFFF;
  --gray-border:  #D8E4F0;
  --text:         #0A1A30;
  --text2:        #4A6070;
  --text3:        #8AA0B0;
  --shadow:       0 2px 12px rgba(20,60,120,0.08);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}
[data-color="blue"][data-theme="dark"] {
  --accent:       #70A0D8;
  --accent2:      #80B0E8;
  --accent-light: #061428;
  --accent-dark:  #90C0F0;
  --success:      #60B888;
  --success-light:#062018;
  --gray-bg:      #060E18;
  --card:         #0C1824;
  --gray-border:  #182436;
  --text:         #D8EAF8;
  --text2:        #7090A8;
  --text3:        #486070;
  --shadow:       0 2px 12px rgba(0,0,0,0.45);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}

/* ══════════════════════════════════════════════════════
   5. เขียวอ่อน — GREEN
══════════════════════════════════════════════════════ */
[data-color="green"] {
  --accent:       #5A8A4A;
  --accent2:      #6A9A5A;
  --accent-light: #EEF5E8;
  --accent-dark:  #3A6A2A;
  --success:      #5A8A4A;
  --success-light:#EEF5E8;
  --gray-bg:      #F4FAF0;
  --card:         #FFFFFF;
  --gray-border:  #D8EDD0;
  --text:         #0A2010;
  --text2:        #407050;
  --text3:        #80A888;
  --shadow:       0 2px 12px rgba(20,80,20,0.08);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}
[data-color="green"][data-theme="dark"] {
  --accent:       #7AB86A;
  --accent2:      #8AC87A;
  --accent-light: #041808;
  --accent-dark:  #9AD88A;
  --success:      #7AB86A;
  --success-light:#041808;
  --gray-bg:      #061008;
  --card:         #0C1A0E;
  --gray-border:  #142816;
  --text:         #D8F0D8;
  --text2:        #68A070;
  --text3:        #487050;
  --shadow:       0 2px 12px rgba(0,0,0,0.4);
  --red: var(--accent); --red2: var(--accent2); --red-light: var(--accent-light);
  --green: var(--success); --green-light: var(--success-light);
}

/* ══════════════════════════════════════════════════════
   Global utility — ใช้งานทุกธีม
══════════════════════════════════════════════════════ */
body {
  transition: background 0.3s, color 0.3s;
}

/* Theme picker widget */
.theme-picker {
  position: fixed;
  top: 12px;
  right: 52px;
  z-index: 9000;
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 8px;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.92);
  transition: opacity .2s, transform .2s;
}
.theme-picker.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}
[data-theme="dark"] .theme-picker {
  background: rgba(30,24,18,0.88);
  border-color: rgba(255,255,255,0.08);
}
.tp-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.tp-swatch:hover { transform: scale(1.2); }
.tp-swatch.active { border-color: var(--text); transform: scale(1.15); }
.tp-swatch[data-c="brown"] { background: linear-gradient(135deg,#B07840,#FAF5EC); }
.tp-swatch[data-c="gold"]  { background: linear-gradient(135deg,#C8A020,#FEF8E0); }
.tp-swatch[data-c="pink"]  { background: linear-gradient(135deg,#C47888,#FDF0F2); }
.tp-swatch[data-c="blue"]  { background: linear-gradient(135deg,#4A7AB5,#EEF4FC); }
.tp-swatch[data-c="green"] { background: linear-gradient(135deg,#5A8A4A,#F4FAF0); }