/* theme.css — Nongsuk · wellness อบอุ่น (แรงบันดาลใจภาษาดีไซน์แบบสงบ/มน — ไม่ใช่แบรนด์อื่น) */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Thai";
  src: url("../fonts/NotoSansThai-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ปุ่มหลัก = ส้มอุ่นสีเดียว · สีพาสเทลใช้เป็นพื้นแผงเท่านั้น */
  --c-primary: #FF5A36;
  --c-sky: #B8E4F0;
  --c-yellow: #FFE2A8;
  --c-pink: #FFD0C2;
  --c-purple: #6E5B9A;
  --c-green: #3F9B7A;
  --c-orange: #FF8F66;
  --c-amber: #FFC857;
  --c-night: #2A2422;
  --c-violet: #4A3F6B;

  --c-ink: #2C2421;
  --c-ink-soft: #5A4E48;
  --c-body: #5C524C;
  --c-muted: #8A7E76;
  --c-hairline: #EDE4DC;
  --c-surface: #FFFCFA;
  --c-cream: #FFF3EA;
  --c-scrim: rgba(44, 36, 33, .45);
  --c-on-light: #2C2421;
  --c-btn-dark: #2C2421;

  /* มน นุ่ม */
  --r-sm: 12px;
  --r-card: 20px;
  --r-md: 28px;
  --r-lg: 999px;
  --r-pill: 999px;
  --r-pill-xl: 999px;

  --shadow-soft: 0 8px 24px rgba(44, 36, 33, .06);
  --shadow-card: 0 10px 28px rgba(44, 36, 33, .07);
  --shadow-btn: 0 4px 0 rgba(44, 36, 33, .08);

  --font: "Figtree", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display-xl: 40px;
  --fs-display-lg: 32px;
  --fs-heading: 24px;
  --fs-title: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --track-display: -0.02em;
  --gutter: 16px;
  --container-max: 1120px;
}
@media (min-width: 992px) {
  :root {
    --fs-display-xl: 56px;
    --fs-display-lg: 44px;
    --fs-heading: 28px;
    --fs-title: 22px;
    --gutter: 40px;
  }
}
html[lang="th"] { --track-display: 0; }

:root[data-theme="dark"] {
  --c-surface: #1E1A19;
  --c-cream: #2A2422;
  --c-ink: #FFF8F3;
  --c-ink-soft: #E8DED6;
  --c-body: #D5CBC3;
  --c-hairline: #3A322E;
  --c-btn-dark: #3A322E;
  --c-muted: #A89A90;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, #3A2A24 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #243038 0%, transparent 50%),
    var(--c-surface);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-body);
  background:
    radial-gradient(1200px 600px at 10% -10%, #FFE8DC 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #E8F6FA 0%, transparent 50%),
    var(--c-surface);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-sm);
}
.skip-link:focus {
  left: var(--gutter);
  top: 8px;
}
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}
#main:focus {
  outline: none;
}
h1, h2, h3 {
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-display);
}
html[lang="th"] :is(h1, h2, h3) { line-height: 1.35; }
a { color: var(--c-primary); }
.container-sep {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.t-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--track-display);
}
.t-display-lg {
  font-size: var(--fs-display-lg);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: var(--track-display);
}
.t-heading { font-size: var(--fs-heading); }
.t-title { font-size: var(--fs-title); font-weight: 700; }
.t-lead { font-size: var(--fs-lead); font-weight: 500; }

.btn-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: 700 17px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-sep:hover { transform: translateY(-1px); }
}
.btn-sep--primary { background: var(--c-primary); color: #fff; }
.btn-sep--dark    { background: var(--c-btn-dark); color: #fff; }
.btn-sep--light   { background: var(--c-cream); color: var(--c-ink-soft); box-shadow: none; }
.btn-sep--white   { background: #fff; color: var(--c-on-light); }
.btn-sep--lg      { min-height: 60px; padding: 16px 36px; font-size: 20px; }
.btn-sep--xl      { min-height: 72px; padding: 20px 40px; font-size: 22px; border-radius: var(--r-pill-xl); }
.btn-sep--compact { min-height: 40px; padding: 8px 18px; font-size: 14px; box-shadow: none; }
.btn-sep:focus-visible,
.chip:focus-visible,
:is(input, select, textarea):focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
}

.chip {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-lg);
  font: 700 16px var(--font);
  background: var(--c-cream);
  color: var(--c-ink);
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--c-btn-dark); color: #fff; }

.panel {
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.panel :is(h1, h2, h3) { color: inherit; }
/* แผงสว่าง = ตัวอักษรหมึก · แผงเข้ม = ขาว */
.panel--yellow { background: var(--c-yellow); color: var(--c-on-light); }
.panel--sky    { background: var(--c-sky);    color: var(--c-on-light); }
.panel--pink   { background: var(--c-pink);   color: var(--c-on-light); }
.panel--orange { background: var(--c-orange); color: var(--c-on-light); }
.panel--amber  { background: var(--c-amber);  color: var(--c-on-light); }
.panel--purple { background: var(--c-purple); color: #fff; }
.panel--green  { background: var(--c-green);  color: #fff; }
.panel--blue   { background: var(--c-primary); color: #fff; }
.panel--cream  { background: var(--c-cream);  color: var(--c-ink); }

.card-plain {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
  border: 1px solid var(--c-hairline);
}

:is(input, select, textarea) {
  min-height: 48px;
  padding: 10px 16px;
  font: inherit;
  color: var(--c-ink);
  background: #fff;
  border: 2px solid var(--c-hairline);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}