/* 
 * Theme 1 - Design Tokens from Figma
 * Extracted from: Active P's design file
 */

/* ============================================
   Google Fonts Imports
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

/* ============================================
   Color Tokens (CSS Custom Properties)
   ============================================ */
:root {
  /* Text Colors */
  --text-text-primary: #212c32;
  --text-text-secondary: #ffffff;
  --text-text-tertiary: #667085;
  
  /* Foreground Colors */
  --foreground-fg-secondary: #ffffff;
  
  /* Background Colors */
  --backgrounds-bg-primary: #ffffff;
  --backgrounds-bg-secondary: #f3f3f3;
  --backgrounds-bg-tertiary: #212c32;
  --backgrounds-bg-brand-one: #343432;
  --backgrounds-bg-brand-two: #ddeeff;
  
  /* Button Colors */
  --button-button-primary-default: #FD8A4D;
  
  /* Border Colors */
  --border-border-primary: #667085;
  --border-border-secondary: #d0d5dd;
  
  /* Shadow Colors */
  --shadow-balanced-spread-1: rgba(12, 12, 13, 0.1);
  --shadow-balanced-shadow-2: rgba(25, 33, 61, 0.1);
  
  /* Gradient Colors (from hero section) */
  --gradient-hero-from: #4ba4a5;
  --gradient-hero-to: #1d3f3f;
}

/* ============================================
   Font Tokens (CSS Custom Properties)
   ============================================ */
:root {
  /* Font Families */
  --font-family-poppins: 'Poppins', sans-serif;
  --font-family-kanit: 'Kanit', sans-serif;
  --font-family-inter: 'Inter', sans-serif;
  --font-family-noto-sans: 'Noto Sans', sans-serif;
  --font-family-dm-sans: 'DM Sans', sans-serif;
  --font-family-roboto: 'Roboto', sans-serif;
  
  /* Heading XL / Bold */
  --heading-xl-font-family: var(--font-family-kanit);
  --heading-xl-font-size: 64px;
  --heading-xl-font-weight: 700;
  --heading-xl-line-height: 64px;
  --heading-xl-letter-spacing: 0;
  --heading-xl-tracking: -0.25px;

   /* Heading LG / Bold */
   --heading-lg-font-family: var(--font-family-kanit);
   --heading-lg-font-size: 48px;
   --heading-lg-font-weight: 700;
   --heading-lg-line-height: 48px;
   --heading-lg-letter-spacing: 0;
   --heading-lg-tracking: -0.25px;
  
  /* Heading MD / Extra Bold */
  --heading-md-font-family: var(--font-family-kanit);
  --heading-md-font-size: 36px;
  --heading-md-font-weight: 700;
  --heading-md-line-height: 100%;
  --heading-md-letter-spacing: 0;
  
  /* Heading SM / Bold */
  --heading-sm-font-family: var(--font-family-kanit);
  --heading-sm-font-size: 32px;
  --heading-sm-font-weight: 700;
  --heading-sm-line-height: 100%;
  --heading-sm-letter-spacing: 0;
  
  /* Heading XS / Bold */
  --heading-xs-font-family: var(--font-family-kanit);
  --heading-xs-font-size: 24px;
  --heading-xs-font-weight: 700;
  --heading-xs-line-height: 100%;
  --heading-xs-letter-spacing: 0;
  
  /* Body LG / Regular */
  --body-lg-font-family: var(--font-family-poppins);
  --body-lg-font-size: 18px;
  --body-lg-font-weight: 400;
  --body-lg-line-height: normal;
  --body-lg-letter-spacing: 0;
  
  /* Body MD / Regular */
  --body-md-font-family: var(--font-family-poppins);
  --body-md-font-size: 16px;
  --body-md-font-weight: 400;
  --body-md-line-height: normal;
  --body-md-letter-spacing: 0;
  
  /* Body SM / Regular */
  --body-sm-font-family: var(--font-family-poppins);
  --body-sm-font-size: 14px;
  --body-sm-font-weight: 400;
  --body-sm-line-height: normal;
  --body-sm-letter-spacing: 0;
  
  /* Button Text */
  --button-text-font-family: var(--font-family-inter);
  --button-text-font-size: 16px;
  --button-text-font-weight: 500;
  --button-text-line-height: 24px;
  --button-text-letter-spacing: 0;
}

/* ============================================
   Typography Utility Classes
   ============================================ */
.heading-xl {
  font-family: var(--heading-xl-font-family);
  font-size: var(--heading-xl-font-size);
  font-weight: var(--heading-xl-font-weight);
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--heading-xl-tracking);
}

.heading-lg {
  font-family: var(--heading-lg-font-family);
  font-size: var(--heading-lg-font-size);
  font-weight: var(--heading-lg-font-weight);
  line-height: var(--heading-lg-line-height);
  letter-spacing: var(--heading-lg-tracking);
}

.heading-md {
  font-family: var(--heading-md-font-family);
  font-size: var(--heading-md-font-size);
  font-weight: var(--heading-md-font-weight);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
}

h3.heading-md {
  text-align: center;
}

.heading-sm {
  font-family: var(--heading-sm-font-family);
  font-size: var(--heading-sm-font-size);
  font-weight: var(--heading-sm-font-weight);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
}

.heading-xs {
  font-family: var(--heading-xs-font-family);
  font-size: var(--heading-xs-font-size);
  font-weight: var(--heading-xs-font-weight);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
}

.body-lg {
  font-family: var(--body-lg-font-family);
  font-size: var(--body-lg-font-size);
  font-weight: var(--body-lg-font-weight);
  line-height: var(--body-lg-line-height);
  letter-spacing: var(--body-lg-letter-spacing);
}

/* Center body-lg text in listing sections */
section.py-5 .body-lg {
  text-align: center;
}

.body-md {
  font-family: var(--body-md-font-family);
  font-size: var(--body-md-font-size);
  font-weight: var(--body-md-font-weight);
  line-height: var(--body-md-line-height);
  letter-spacing: var(--body-md-letter-spacing);
}

.body-sm {
  font-family: var(--body-sm-font-family);
  font-size: var(--body-sm-font-size);
  font-weight: var(--body-sm-font-weight);
  line-height: var(--body-sm-line-height);
  letter-spacing: var(--body-sm-letter-spacing);
}

.button-text {
  font-family: var(--button-text-font-family);
  font-size: var(--button-text-font-size);
  font-weight: var(--button-text-font-weight);
  line-height: var(--button-text-line-height);
  letter-spacing: var(--button-text-letter-spacing);
}

/* ============================================
   Shadow Tokens
   ============================================ */
:root {
  --shadow-balanced-spread-1: 0px 0px 26.9px 2px var(--shadow-balanced-spread-1);
  --shadow-balanced-shadow-2: 0px 2px 6px 0px var(--shadow-balanced-shadow-2);
}