:root {
  /* base 62.5% = 10px ที่ browser default (16px) */
  font-size: 62.5%;

  /* =========================================
     COLORS
  ========================================= */
  --color-accent-rgb: 17 17 17;
  --color-error-rgb: 200 0 0;

  --color-cyan: #0CF;
  --color-cyan-rgb: 0 204 255;
  --color-yellow: #FFDE5B;
  --color-yellow-rgb: 255 222 91;
  --color-teal: #267286;
  --color-teal-rgb: 38 114 134;

  --color-dark-teal: #21374F;
  --color-dark-teal-rgb: 33 55 79;
  --color-light-blue: #BDFDFF;
  --color-light-blue-rgb: 189 253 255;

  --color-light-blue-02: #F0FCFF;
  --color-light-blue-02-rgb: 240 252 255;

  --color-grey: #7A8794;
  --color-grey-rgb: 122 135 148;
  --color-light-grey: #E6E9EC;
  --color-light-grey-rgb: 230 233 236;

  --color-black: #000;
  --color-black-rgb: 0 0 0;
  --color-white: #FFF;
  --color-white-rgb: 255 255 255;

  --color-green: #03BF62;
  --color-green-rgb: 3 191 98;
  --color-pink: #FF88C4;
  --color-pink-rgb: 255 136 196;

  /* =========================================
     FONTS
  ========================================= */
  --font-primary: 'CenturyGothic', 'DBHelvethaicaX', sans-serif;

  /* Per-size stacks: Latin first, then the size-adjusted Thai face that
     matches this step of the scale (see font.css). Applied in font.css. */
  --font-display: 'CenturyGothic', 'DBHelvethaicaX-display', sans-serif;
  --font-h1: 'CenturyGothic', 'DBHelvethaicaX-h1', sans-serif;
  --font-h2: 'CenturyGothic', 'DBHelvethaicaX-h2', sans-serif;
  --font-h3: 'CenturyGothic', 'DBHelvethaicaX-h3', sans-serif;
  --font-h4: 'CenturyGothic', 'DBHelvethaicaX-h4', sans-serif;
  --font-h5: 'CenturyGothic', 'DBHelvethaicaX-h5', sans-serif;
  --font-h6: 'CenturyGothic', 'DBHelvethaicaX-h6', sans-serif;
  --font-body: 'CenturyGothic', 'DBHelvethaicaX-body', sans-serif;
  --font-overline: 'CenturyGothic', 'DBHelvethaicaX-overline', sans-serif;

  /* Role tokens (base/heading/button/icon) below are consumed by theme-wp.css
     (WP plugin overrides: cookie consent, CF7, page navigation) — keep the
     names stable even if the values change per project. */

  /* -- Base (body text) -- */
  --font-base: var(--font-body);
  --font-base-style: normal;
  --font-base-weight: 400;
  --font-base-size: var(--font-size-body);
  --font-base-size--sm: 1.4rem;
  --font-base-line-height: var(--line-height-body);
  --font-base-letter-spacing: normal;
  --font-base-text-transform: none;

  /* -- Heading -- */
  --font-heading: var(--font-h2);
  --font-heading-weight: 700;
  --font-heading-letter-spacing: normal;
  --font-heading-text-transform: none;
  --font-size-lg: var(--font-size-h5);
  --font-weight-bold: 700;

  /* -- Button -- */
  --font-button: var(--font-body);
  --font-button-style: normal;
  --font-button-weight: 700;
  --font-button-letter-spacing: normal;
  --font-button-text-transform: none;
  --font-size-button: var(--font-size-body);
  --line-height-button: var(--line-height-body);

  /* -- Icon font -- */
  --font-icon: 'iconfont';
  --font-icon-style: normal;
  --font-icon-weight: 400;
  --font-icon-size: 1.6rem;
  --font-icon-line-height: 1;

  /* -- Link / underline -- */
  --text-decoration-thickness: 0.1rem;
  --text-underline-offset: 0.2rem;

  /* end: theme-wp.css tokens */

  /* =========================================
     FONT SCALE (fluid clamp inputs)
     Normal case (-min < -max): fluid-scales the whole way, see font-scale-engine.css.
     If -min > -max (mobile bigger than desktop, e.g. h6): no fluid scaling at all —
     just a hard cut at --font-scale-breakpoint between -min and -max.
  ========================================= */
  --font-scale-min-width: 768;
  --font-scale-breakpoint: 1280;
  --font-scale-wide-start: 1440;
  --font-scale-breakpoint-wide: 1920;
  --font-scale-ratio: 1;

  --font-size-display-min: 36;
  --font-size-display-max: 72;

  --font-size-h1-min: 34;
  --font-size-h1-max: 64;

  --font-size-h2-min: 32;
  --font-size-h2-max: 54;

  --font-size-h3-min: 26;
  --font-size-h3-max: 40;

  --font-size-h4-min: 22;
  --font-size-h4-max: 30;

  --font-size-h5-min: 18;
  --font-size-h5-max: 20;

  --font-size-h6-min: 16;
  --font-size-h6-max: 16;

  --font-size-body-min: 13;
  --font-size-body-max: 13;

  --font-size-overline-min: 11;
  --font-size-overline-max: 11;


  /* Adding a new size (e.g. tagline)? Set its -min/-max here and its
     --line-height-{name} below, then run `npm run build:typography` —
     it regenerates font-scale-engine.css and typography.css for you. */

  --line-height-display: 1.1;
  --line-height-h1: 1.1;
  --line-height-h2: 1.1;
  --line-height-h3: 1.1;
  --line-height-h4: 1.1;
  --line-height-h5: 1.1;
  --line-height-h6: 1.1;

  --line-height-body: 1.4;
  --line-height-overline: 1.5;

  /* =========================================
     LAYOUT
  ========================================= */
  --container-max-width: 192rem;

  /* left-right (horizontal) container padding */
  --container-gutter: 1.6rem;
  --container-gutter-xs: 4rem;
  --container-gutter-sm: 7.8rem;
  --container-gutter-md: 12.7rem;

  /* top-bottom (vertical) spacing between sections */
  --section-gap: 7.2rem;
  --section-gap-md: 14rem;

  /* offset for fixed/floating elements from the viewport edge */
  --edge-inset: var(--container-gutter);

  /* generic spacing scale (gaps, component padding) */
  --spacing-xs: 0.8rem;
  --spacing-sm: 1.2rem;
  --spacing-md: 1.6rem;
  --spacing-lg: 2.4rem;
  --spacing-xl: 3.2rem;


  /* =========================================
     BORDER
  ========================================= */
  --border-radius: 1.2rem;
  --border-radius-sm: 1.2rem;
  --border-radius-md: 3.2rem;
  --border-width: 0.1rem;


  /* =========================================
     MOTION
  ========================================= */
  --duration: 0.5s;
  --easing: ease;

  /* Hover-scale motion: short enough to feel immediate on pointer-over. */
  --duration-hover: 1.5s;
  --duration-glow: 0.8s;
  --easing-out: cubic-bezier(0.33, 1, 0.68, 1);
}
/* tablet (iPad): wider horizontal container padding */
@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --container-gutter: 4rem;
  }
}