/* Shared presentation for the customer website. */
:root {
  --brand-content-width: 1320px;
  --brand-page-gutter: clamp(16px, 2vw, 24px);
  --brand-body-size: 16px;
  --brand-font: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  /* Graphite + the logo's red-orange; values match main.css (--tg-ink-*, --tg-brand-red*). */
  --brand-page: #16181D;
  --brand-panel: #1F2228;
  --brand-line: #3A3E46;
  --brand-text: #F4F4F5;
  --brand-muted: #C4C7CD;
  --brand-accent: #FF6B4A; /* red as text/outline on graphite, 6.3:1 */
  --brand-action: #D92D0B; /* fill, white text 4.85:1 */
  --brand-action-hover: #C02608;
  --brand-radius: 14px;
  --tg-body-font-family: var(--brand-font);
  --tg-heading-font-family: var(--brand-font);
  --tg-body-color: var(--brand-muted);
  --tg-heading-color: var(--brand-text);
  --tg-color-dark: var(--brand-page);
}

:root[lang^="th"] {
  --brand-font: "Noto Sans Thai", "Leelawadee UI", Thonburi, system-ui, sans-serif;
}

body {
  font-family: var(--brand-font);
  font-size: var(--brand-body-size);
  line-height: 1.65;
}

button, input, select, textarea { font-family: inherit; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

.tg-btn {
  min-height: 44px;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.45;
}
.tg-btn-one { background: var(--brand-action); color: #fff; }
.tg-btn-one:hover { background: var(--brand-action-hover); color: #fff; }

:where(.contact__form, .contact-form) :is(input, textarea)::placeholder {
  color: #A7ABB3;
  opacity: 1;
}

/* Align the content edges across the public pages and the embedded shop. */
.container {
  width: 100%;
  max-width: var(--brand-content-width);
  padding-inline: var(--brand-page-gutter);
}