/* 寄得 remember — 配色樣板
 *
 * 店家在「店員版 → 管理 → 店別設定」選一套，存進 stores.settings.theme，
 * /api/config 送給前端，每一頁開場時寫進 <html data-theme="…">。
 *
 * 為什麼是獨立一個檔：四頁（客人版、店員版、完整管理、門市頁）都要吃同一套色，
 * 寫在各自的 <style> 裡就要改四個地方，一定會有一頁忘記跟上。
 *
 * 每一頁自己的 :root 仍然是 amber，所以這個檔讀不到的時候畫面照常
 * （只是不能換色），不會變成沒有顏色的白紙。
 *
 * 命名沿用 --amber-* ——那是「強調色階」的意思，不是真的橘色。
 * 改名字要動四頁上百處，不值得。
 *
 * ⚠️ 不要手改這個檔。它是 tools/mkthemes.py 產的，
 *    那支會順便把對比度算出來驗過（內文、次要字、按鈕上的字一律過 WCAG AA）。
 */

/* 奶油白．橘 —— 預設，值跟各頁 <style> 裡的 :root 一模一樣 */
html[data-theme="amber"]{
  --bg:#F3EBDC; --card:#FFFFFF; --card-2:#FFFCF6; --sub:#FAF4E9;
  --well:#FFFFFF; --btn:#FFFFFF;
  --line:#E4D5BB; --line-2:#BFA47A;
  --ink:#2A2015; --ink-2:#57452E; --ink-3:#7B6644;
  --amber-300:#FBB63C; --amber-500:#EF9A11; --amber-600:#E08D08; --amber-700:#C87A05;
  --amber-dim:#FCEAC7; --on-amber:#2A1B02; --seg-on:#A96A05;
  --shadow-card:0 1px 2px rgba(96,68,26,.05), 0 10px 26px rgba(96,68,26,.09);
  --shadow-amber:0 1px 2px rgba(150,92,4,.12), 0 12px 28px rgba(150,92,4,.22);
  /* 客人版與門市頁那套（更淺、更輕） */
  --sand-50:#FAF3E7; --sand-100:#F6EEE1; --sand-200:#F0E4D1;
  --card-grad:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  --amber-grad:linear-gradient(152deg,var(--amber-300) 0%,var(--amber-500) 48%,var(--amber-700) 100%);
  --bg-grad:linear-gradient(168deg,var(--sand-50) 0%,var(--sand-100) 52%,var(--sand-200) 100%);
}
/* 客人版與門市頁的字色與線條比店員版淺一階 */
html[data-theme="amber"] body.user{--line:#F0E5D3; --line-2:#DFD0B6; --ink:#3E2E1A; --ink-2:#6B5940; --ink-3:#AC9A80; --card-2:#FFFAF1}

/* 鵝黃 */
html[data-theme="lemon"]{
  --bg:#F4F1DC; --card:#FFFFFF; --card-2:#FFFEF8; --sub:#FAF8EB;
  --well:#FFFFFF; --btn:#FFFFFF;
  --line:#E4DEB9; --line-2:#B4A95F;
  --ink:#292615; --ink-2:#56512E; --ink-3:#797244;
  --amber-300:#FCE25F; --amber-500:#F1D132; --amber-600:#F6D013; --amber-700:#EAC406;
  --amber-dim:#FCF4C5; --on-amber:#2C2502; --seg-on:#8F7804;
  --shadow-card:0 1px 2px rgba(86,81,46,.05), 0 10px 26px rgba(86,81,46,.09);
  --shadow-amber:0 1px 2px rgba(234,196,6,.12), 0 12px 28px rgba(234,196,6,.22);
  /* 客人版與門市頁那套（更淺、更輕） */
  --sand-50:#FAF7E5; --sand-100:#F5F3E0; --sand-200:#F1ECD0;
  --card-grad:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  --amber-grad:linear-gradient(152deg,var(--amber-300) 0%,var(--amber-500) 48%,var(--amber-700) 100%);
  --bg-grad:linear-gradient(168deg,var(--sand-50) 0%,var(--sand-100) 52%,var(--sand-200) 100%);
}
/* 客人版與門市頁的字色與線條比店員版淺一階 */
html[data-theme="lemon"] body.user{--line:#F1EDD0; --line-2:#DFDAB3; --ink:#3D381A; --ink-2:#69643F; --ink-3:#B0A97D; --card-2:#FFFDF0}

/* 抹茶綠 */
html[data-theme="moss"]{
  --bg:#E8EFE1; --card:#FFFFFF; --card-2:#FBFEF9; --sub:#F2F7EE;
  --well:#FFFFFF; --btn:#FFFFFF;
  --line:#CEDCC1; --line-2:#95AE7F;
  --ink:#1E2518; --ink-2:#414F36; --ink-3:#5D6F4E;
  --amber-300:#81E33B; --amber-500:#66C125; --amber-600:#5AB01C; --amber-700:#4E9B17;
  --amber-dim:#DFF1D0; --on-amber:#142707; --seg-on:#438514;
  --shadow-card:0 1px 2px rgba(65,79,54,.05), 0 10px 26px rgba(65,79,54,.09);
  --shadow-amber:0 1px 2px rgba(78,155,23,.12), 0 12px 28px rgba(78,155,23,.22);
  /* 客人版與門市頁那套（更淺、更輕） */
  --sand-50:#EFF6E9; --sand-100:#EAF1E4; --sand-200:#E0EAD6;
  --card-grad:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  --amber-grad:linear-gradient(152deg,var(--amber-300) 0%,var(--amber-500) 48%,var(--amber-700) 100%);
  --bg-grad:linear-gradient(168deg,var(--sand-50) 0%,var(--sand-100) 52%,var(--sand-200) 100%);
}
/* 客人版與門市頁的字色與線條比店員版淺一階 */
html[data-theme="moss"] body.user{--line:#E0EBD6; --line-2:#C9D7BC; --ink:#2B3620; --ink-2:#536147; --ink-3:#95A687; --card-2:#F7FCF3}

/* 天空藍 */
html[data-theme="ocean"]{
  --bg:#E1E9EF; --card:#FFFFFF; --card-2:#F9FCFE; --sub:#EEF3F7;
  --well:#FFFFFF; --btn:#FFFFFF;
  --line:#C2D1DB; --line-2:#879FB0;
  --ink:#192024; --ink-2:#37444E; --ink-3:#4F616E;
  --amber-300:#168AE9; --amber-500:#196BAE; --amber-600:#115E9C; --amber-700:#0E5086;
  --amber-dim:#D1E3F0; --on-amber:#FFFFFF; --seg-on:#115E9D;
  --shadow-card:0 1px 2px rgba(55,68,78,.05), 0 10px 26px rgba(55,68,78,.09);
  --shadow-amber:0 1px 2px rgba(14,80,134,.12), 0 12px 28px rgba(14,80,134,.22);
  /* 客人版與門市頁那套（更淺、更輕） */
  --sand-50:#EAF1F6; --sand-100:#E4ECF1; --sand-200:#D7E2EA;
  --card-grad:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  --amber-grad:linear-gradient(152deg,var(--amber-300) 0%,var(--amber-500) 48%,var(--amber-700) 100%);
  --bg-grad:linear-gradient(168deg,var(--sand-50) 0%,var(--sand-100) 52%,var(--sand-200) 100%);
}
/* 客人版與門市頁的字色與線條比店員版淺一階 */
html[data-theme="ocean"] body.user{--line:#D7E2EA; --line-2:#BDCCD6; --ink:#212D36; --ink-2:#485660; --ink-3:#8899A5; --card-2:#F3F8FC}

/* 墨黑 */
html[data-theme="ink"]{
  --bg:#E6E7EA; --card:#FFFFFF; --card-2:#FBFBFC; --sub:#F1F2F3;
  --well:#FFFFFF; --btn:#FFFFFF;
  --line:#CBCDD2; --line-2:#969AA1;
  --ink:#1D1E20; --ink-2:#3F4145; --ink-3:#5A5D63;
  --amber-300:#687288; --amber-500:#515867; --amber-600:#454C59; --amber-700:#393F4B;
  --amber-dim:#DCDFE5; --on-amber:#FFFFFF; --seg-on:#4B5362;
  --shadow-card:0 1px 2px rgba(63,65,69,.05), 0 10px 26px rgba(63,65,69,.09);
  --shadow-amber:0 1px 2px rgba(57,63,75,.12), 0 12px 28px rgba(57,63,75,.22);
  /* 客人版與門市頁那套（更淺、更輕） */
  --sand-50:#EEEFF1; --sand-100:#E9EAEC; --sand-200:#DEE0E3;
  --card-grad:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  --amber-grad:linear-gradient(152deg,var(--amber-300) 0%,var(--amber-500) 48%,var(--amber-700) 100%);
  --bg-grad:linear-gradient(168deg,var(--sand-50) 0%,var(--sand-100) 52%,var(--sand-200) 100%);
}
/* 客人版與門市頁的字色與線條比店員版淺一階 */
html[data-theme="ink"] body.user{--line:#DEE0E3; --line-2:#C6C8CD; --ink:#292A2E; --ink-2:#515358; --ink-3:#92959A; --card-2:#F6F7F9}