/* Design token ทั้งหมด (design ข้อ 7) ห้าม hardcode ค่าสี/ขนาดนอกไฟล์นี้ */
@font-face { font-family: "Prompt"; font-weight: 500; font-display: swap; src: url("../fonts/prompt-thai-500-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-weight: 500; font-display: swap; src: url("../fonts/prompt-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Prompt"; font-weight: 600; font-display: swap; src: url("../fonts/prompt-thai-600-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-weight: 600; font-display: swap; src: url("../fonts/prompt-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-weight: 400; font-display: swap; src: url("../fonts/sarabun-thai-400-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 400; font-display: swap; src: url("../fonts/sarabun-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-weight: 600; font-display: swap; src: url("../fonts/sarabun-thai-600-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-weight: 600; font-display: swap; src: url("../fonts/sarabun-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --c-primary: #5B3A29;
  --c-primary-press: #4A2E20;
  --c-on-primary: #FFFFFF;
  --c-accent: #C68B59;
  --c-accent-soft: #F3E3D3;
  --c-bg: #FBF6EF;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F5ECE1;
  --c-text: #2B1E16;
  --c-muted: #6F5F54;
  --c-line: #E8DDD0;
  --c-success: #3F6B3B;
  --c-success-bg: #E6F0E1;
  --c-warning-fg: #5A3B00;
  --c-warning-bg: #FFF1CC;
  --c-danger: #B3402F;
  --c-danger-bg: #FBE7E3;
  --c-info: #1F5568;
  --c-info-bg: #E2EFF3;
  --c-overlay: rgba(43, 30, 22, .45);
  --c-qr-bg: #FFFFFF;
  --c-qr-fg: #000000;
  --cat-coffee: #8A5A3C;
  --cat-tea: #C98A3A;
  --cat-matcha: #6E9A5B;
  --cat-soda: #4F8FA8;
  --cat-specialty: #8B5E83;

  --font-head: "Prompt", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px;
  --fs-queue: 88px;
  --lh-body: 1.5; --lh-head: 1.35;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --touch-min: 48px; --btn-h: 48px; --btn-h-primary: 56px; --stepper-btn: 48px;
  --nav-h: 64px;
  --radius-card: 12px; --radius-sheet: 20px; --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(43, 30, 22, .08);
  --shadow-sheet: 0 -4px 16px rgba(43, 30, 22, .15);
  --cart-w: 340px;
  --rail-w: 88px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1024px) { :root { --cart-w: 380px; } }

/* โหมดมืด (ต่อยอดพาเลตต์ระบบเดิม) */
[data-theme="dark"] {
  --c-bg: #1A120B; --c-surface: #2C2119; --c-surface-alt: #38291F;
  --c-primary: #D5CEA3; --c-primary-press: #E5E5CB; --c-on-primary: #1A120B;
  --c-accent: #E5E5CB; --c-accent-soft: #3C2A21;
  --c-text: #F5ECE1; --c-muted: #B8AB9F; --c-line: rgba(255, 255, 255, .12);
  --c-success: #7BC47A; --c-success-bg: rgba(123, 196, 122, .15);
  --c-warning-fg: #FFE29A; --c-warning-bg: #4A3A12;
  --c-danger: #FF8A7A; --c-danger-bg: rgba(255, 138, 122, .15);
  --c-info: #8CC8DB; --c-info-bg: rgba(140, 200, 219, .15);
  --c-overlay: rgba(0, 0, 0, .6);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-sheet: 0 -4px 16px rgba(0, 0, 0, .5);
}