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

   /* =========================================
     COLORS
  ========================================= */
   --color-accent-rgb: 17 17 17;
   --color-error-rgb: 220 38 38;

   --color-blue: #312682;
   --color-blue-rgb: 49 38 130;
   --color-light-blue: #B9C1FC;
   --color-light-blue-rgb: 185 193 252;
   --color-pastel-light-blue: #E6EAFF;
   --color-pastel-light-blue-rgb: 230 234 255;

   --color-white: #ffffff;
   --color-white-rgb: 255 255 255;
   --color-black: #000000;
   --color-black-rgb: 0 0 0;
   --color-grey: #4B4B4B;
   --color-grey-rgb: 75 75 75;
   --color-light-grey: #F7F7F7;
   --color-light-grey-rgb: 247 247 247;


   /* =========================================
     FONTS
  ========================================= */
   --font-primary: "aktiv-grotesk-thai", 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-primary);
   --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-primary);
   --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-primary);
   --font-button-style: normal;
   --font-button-weight: 600;
   --font-button-letter-spacing: normal;
   --font-button-text-transform: none;

   /* -- 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.3;

   --font-size-display-min: 40;
   --font-size-display-max: 60;

   --font-size-h1-min: 28;
   --font-size-h1-max: 36;

   --font-size-h2-min: 20;
   --font-size-h2-max: 24;

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

   --font-size-h4-min: 17;
   --font-size-h4-max: 16;

   --font-size-h5-min: 15;
   --font-size-h5-max: 14;

   --font-size-h6-min: 13;
   --font-size-h6-max: 12;

   --font-size-body-min: 15;
   --font-size-body-max: 14;

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

   --font-size-button-min: 14;
   --font-size-button-max: 13;

   --font-size-sub-min: 13;
   --font-size-sub-max: 11;

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

   --line-height-body: 1.4;
   --line-height-body-2: 1.4;
   --line-height-button: 1.4;
   --line-height-sub: 1.4;

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

   /* left-right (horizontal) container padding */
   --container-gutter: 2.4rem;

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

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

   /* =========================================
     SPACING SCALE
  ========================================= */
   --spacing-xs: 0.8rem;
   --spacing-sm: 1.2rem;
   --spacing-md: 2rem;
   --spacing-lg: 2.4rem;
   --spacing-xl: 3.2rem;

   /* =========================================
     BORDER
  ========================================= */
   --border-radius: 0.4rem;
   --border-width: 0.1rem;


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

@media (min-width: 1024px) {
   :root {
      --container-gutter: 6rem;
   }
}