:root {
  /* Brand Colors */
  --brand-yellow: #FFD231;
  --ink: #2D2418;
  --hero-charcoal: #1A1008;
  --brand-brown: #5D4E37;
  --cream: #FFF9E6;
  --conversion-red: #E53E3E;
  --line-green: #06C755;
  --b2b-blue: #418CD0;
  --surface: #FFFFFF;
  --border: #E4DCCC;

  /* Typography */
  --font-thai: 'Sarabun', sans-serif;
  --font-nav: 'Kanit', sans-serif;

  --text-hero: clamp(40px, 5vw, 64px);
  --text-section: clamp(28px, 3.5vw, 44px);
  --text-card: clamp(18px, 2vw, 24px);
  --text-body: clamp(15px, 1.2vw, 18px);
  --text-caption: 13px;

  /* Layout */
  --max-width: 1280px;
  --section-pad: clamp(48px, 6vw, 96px);
  --card-radius: 18px;
  --btn-radius: 12px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(45, 36, 24, 0.10);
  --shadow-hover: 0 8px 40px rgba(45, 36, 24, 0.18);
}