/* ==========================
   CSS RESET (Light & Safe)
   ========================== */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ===== Brand สีเสริม (บาลานซ์สายตา) ===== */
  --color-darkgray: #2e2e2e; /*ตัวอักษร*/
  --color-gray: #f1f1f1;
  --color-lightgray: #f5f5f5; /*พื้นหลัง*/
  --color-white: #ffffff; /*Content*/
  /* ===== Font ===== */
  --font-main:
    "IBM Plex Sans Thai", "Sarabun", "IBM Plex Sans Thai", "Anuphan", "Inter",
    "Prompt", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* ===== Font Size ===== */
  --fs-5xs: 0.25rem; /*4px*/
  --fs-4xs: 0.375rem; /*6px*/
  --fs-3xs: 0.5rem; /*8px*/
  --fs-2xs: 0.625rem; /*10px*/
  --fs-xs: 0.75rem; /*12px*/
  --fs-sm: 0.875rem; /*14px*/
  --fs-base: 1rem; /*16px*/
  --fs-lg: clamp(1.05rem, 0.6vw, 1.125rem);
  --fs-xl: clamp(1.3rem, 1.5vw, 1.5rem); /* ~21–24px */
  --fs-2xl: clamp(1.8rem, 3vw, 2.2rem); /* ~29–35px */
  --fs-3xl: clamp(2.2rem, 4vw, 2.8rem); /* ~35–45px */
  --fs-4xl: clamp(2.8rem, 5vw, 3.6rem); /* ~45–58px */
  --fs-5xl: clamp(3.4rem, 6vw, 4.5rem); /* ~54–72px */
  --fs-6xl: clamp(4.2rem, 8vw, 6rem); /* ~67–96px */
  /* ===== Line Height ===== */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ===== Spacing ===== */
  --sp-1: var(--fs-5xs);
  --sp-2: var(--fs-3xs);
  --sp-3: var(--fs-xs);
  --sp-4: var(--fs-base);
  --sp-5: var(--fs-xl);
  --sp-6: var(--fs-2xl);

  /* ===== Radius ===== */
  --r-sm: var(--fs-4xs);
  --r-md: var(--fs-2xs);
  --r-lg: var(--fs-base);

  /* ===== Shadow ===== */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --sh-lgbtn: 0 2px 4px rgba(243, 239, 239, 0.5);

  /* ===== Transition ===== */
  --ts-fast: 0.15s ease;
  --ts-base: 0.3s ease;
}

html {
  font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

small {
  font-size: var(--fs-sm);
}
.f-6xl {
  font-size: var(--fs-6xl);
}
.f-5xl {
  font-size: var(--fs-5xl);
}
.f-4xl {
  font-size: var(--fs-4xl);
}
.f-3xl {
  font-size: var(--fs-3xl);
}
.f-2xl {
  font-size: var(--fs-2xl);
}
.f-xl {
  font-size: var(--fs-xl);
}
.f-lg {
  font-size: var(--fs-lg);
}
.f-base {
  font-size: var(--fs-base);
}
.f-sm {
  font-size: var(--fs-sm);
}
.f-xs {
  font-size: var(--fs-xs);
}
.f-2xs {
  font-size: var(--fs-2xs);
}
.f-3xs {
  font-size: var(--fs-3xs);
}
.f-4xs {
  font-size: var(--fs-4xs);
}
.f-5xs {
  font-size: var(--fs-5xs);
}

h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-3xl);
}
h3 {
  font-size: var(--fs-2xl);
}
h4 {
  font-size: var(--fs-xl);
}
h5 {
  font-size: var(--fs-lg);
}
h6 {
  font-size: var(--fs-base);
}

[class^="f-"] {
  line-height: inherit;
}

/* Remove list styles */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ห้ามลากคลุมภาพ */
img {
  user-select: none;
}

a {
  text-decoration: none;
}