/*
 * =========================================
 * DESIGN TOKENS — Typography + Color + Spacing + Radius
 * Token names match Figma spec exactly
 * Desktop / Tablet (≤1024px) / Mobile (≤768px)
 * =========================================
 */

 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

 /* ----------------------------------------
    PRIMITIVE TOKENS
 ---------------------------------------- */
 :root {
   /* Font Family */
   --Typography-family-font-family-sans: "IBM Plex Sans Thai", sans-serif;
 
   /* Size */
   --Typography-size-size-12: 0.75rem;
   --Typography-size-size-14: 0.875rem;
   --Typography-size-size-16: 1rem;
   --Typography-size-size-18: 1.125rem;
   --Typography-size-size-20: 1.25rem;
   --Typography-size-size-24: 1.5rem;
   --Typography-size-size-28: 1.75rem;
   --Typography-size-size-30: 1.875rem;
   --Typography-size-size-32: 2rem;
   --Typography-size-size-36: 2.25rem;
   --Typography-size-size-40: 2.5rem;
   --Typography-size-size-48: 3rem;
   --Typography-size-size-56: 3.5rem;
   --Typography-size-size-60: 3.75rem;
   --Typography-size-size-72: 4.5rem;
 
   /* Line Height */
   --Typography-lineHeight-lineheight-16: 1rem;
   --Typography-lineHeight-lineheight-20: 1.25rem;
   --Typography-lineHeight-lineheight-24: 1.5rem;
   --Typography-lineHeight-lineheight-28: 1.75rem;
   --Typography-lineHeight-lineheight-32: 2rem;
   --Typography-lineHeight-lineheight-36: 2.25rem;
   --Typography-lineHeight-lineheight-40: 2.5rem;
   --Typography-lineHeight-lineheight-44: 2.75rem;
   --Typography-lineHeight-lineheight-48: 3rem;
   --Typography-lineHeight-lineheight-56: 3.5rem;
   --Typography-lineHeight-lineheight-60: 3.75rem;
   --Typography-lineHeight-lineheight-64: 4rem;
   --Typography-lineHeight-lineheight-72: 4.5rem;
   --Typography-lineHeight-lineheight-84: 5.25rem;
   --Typography-lineHeight-lineheight-88: 5.5rem;
   --Typography-lineHeight-lineheight-90: 5.625rem;
 
   /* Weight */
   --Typography-Weight-Regular:  400;
   --Typography-Weight-Medium:   500;
   --Typography-Weight-Semibold: 600;
   --Typography-Weight-Bold:     700;
 
   /* ----------------------------------------
      COLOR — Brand / Yellow
   ---------------------------------------- */
   --Color-Brand-yellow-50:  #FFFAE8;
   --Color-Brand-yellow-100: #FFF0B6;
   --Color-Brand-yellow-200: #FFE993;
   --Color-Brand-yellow-300: #FFE062;
   --Color-Brand-yellow-400: #FFD943;
   --Color-Brand-yellow-500: #FFD014;
   --Color-Brand-yellow-600: #E8BD12;
   --Color-Brand-yellow-700: #B5940E;
   --Color-Brand-yellow-800: #8C720B;
   --Color-Brand-yellow-900: #6B5708;
 
   /* ----------------------------------------
      COLOR — Brand / Blue
   ---------------------------------------- */
   --Color-Brand-blue-50:              #E6ECF3;
   --Color-Brand-blue-100:             #B1C4D9;
   --Color-Brand-blue-200:             #8BA8C7;
   --Color-Brand-blue-300:             #5580AE;
   --Color-Brand-blue-400:             #35689E;
   --Color-Brand-blue-500:             #024286;
   --Color-Brand-blue-600:             #023C7A;
   --Color-Brand-blue-700:             #012F5F;
   --Color-Brand-blue-800:             #01244A;
   --Color-Brand-blue-900:             #011C38;
   --Color-Brand-blue-900-trans-50:    rgba(1, 28, 56, 0.5);
   --Color-Brand-blue-brand-main:      #184382;
   --Color-Brand-blue-brand-main-soft: #3B6397;
   --Color-Brand-blue-brand-main-50:   rgba(24, 67, 130, 0.5);
 
   /* ----------------------------------------
      COLOR — Neutral
   ---------------------------------------- */
   --Color-Neutral-grey-50:  #FCFCFD;
   --Color-Neutral-grey-100: #F5F6F8;
   --Color-Neutral-grey-200: #F0F2F4;
   --Color-Neutral-grey-300: #E9ECF0;
   --Color-Neutral-grey-400: #E5E8ED;
   --Color-Neutral-grey-500: #DEE2E8;
   --Color-Neutral-grey-600: #CACED3;
   --Color-Neutral-grey-700: #9EA0A5;
   --Color-Neutral-grey-800: #7A7C80;
   --Color-Neutral-grey-900: #5D5F61;
 
   /* ----------------------------------------
      COLOR — Base
   ---------------------------------------- */
   --Color-Base-White:       #FFFFFF;
   --Color-Base-Black:       #000000;
   --Color-Base-Black-50:    rgba(0, 0, 0, 0.5);
   --Color-Base-White-50:    rgba(255, 255, 255, 0.5);
   --Color-Base-Transparent: rgba(255, 255, 255, 0);
   --Color-Base-Red:         #E60000;
   --Color-Base-Green:       #00CA11;
   --Color-Base-Orange:      #F07000;
 
   /* ----------------------------------------
      SPACING
   ---------------------------------------- */
   --space-4:  4px;
   --space-8:  8px;
   --space-16: 16px;
   --space-24: 24px;
   --space-32: 32px;
   --space-40: 40px;
   --space-48: 48px;
   --space-64: 64px;
   --space-80: 80px;
   --space-96: 96px;
 
   /* ----------------------------------------
      RADIUS
   ---------------------------------------- */
   --radius-0:    0px;
   --radius-4:    4px;
   --radius-8:    8px;
   --radius-16:   16px;
   --radius-24:   24px;
   --radius-32:   32px;
   --radius-full: 999px;
 }
 
 /* ----------------------------------------
    SEMANTIC TOKENS — DESKTOP (default)
 ---------------------------------------- */
 :root {
   /* Display/2xl */
   --Typography-Display-2xl-2xl-size:     var(--Typography-size-size-72);
   --Typography-Display-2xl-2xl-lh:       var(--Typography-lineHeight-lineheight-88);
   --Typography-Display-2xl-2xl-bold:     var(--Typography-Weight-Bold);
   --Typography-Display-2xl-2xl-semibold: var(--Typography-Weight-Semibold);
   --Typography-Display-2xl-2xl-medium:   var(--Typography-Weight-Medium);
   --Typography-Display-2xl-2xl-regular:  var(--Typography-Weight-Regular);
 
   /* Display/xl */
   --Typography-Display-xl-xl-size:     var(--Typography-size-size-60);
   --Typography-Display-xl-xl-lh:       var(--Typography-lineHeight-lineheight-72);
   --Typography-Display-xl-xl-bold:     var(--Typography-Weight-Bold);
   --Typography-Display-xl-xl-semibold: var(--Typography-Weight-Semibold);
   --Typography-Display-xl-xl-medium:   var(--Typography-Weight-Medium);
   --Typography-Display-xl-xl-regular:  var(--Typography-Weight-Regular);
 
   /* Display/Title */
   --Typography-Display-Title-Title-size:     var(--Typography-size-size-32);
   --Typography-Display-Title-Title-lh:       var(--Typography-lineHeight-lineheight-48);
   --Typography-Display-Title-Title-bold:     var(--Typography-Weight-Bold);
   --Typography-Display-Title-Title-semibold: var(--Typography-Weight-Semibold);
   --Typography-Display-Title-Title-medium:   var(--Typography-Weight-Medium);
   --Typography-Display-Title-Title-regular:  var(--Typography-Weight-Regular);
 
   /* Display/Title sm */
   --Typography-Display-Title-sm-Title-sm-size:     var(--Typography-size-size-20);
   --Typography-Display-Title-sm-Title-sm-lh:       var(--Typography-lineHeight-lineheight-32);
   --Typography-Display-Title-sm-Title-sm-bold:     var(--Typography-Weight-Bold);
   --Typography-Display-Title-sm-Title-sm-semibold: var(--Typography-Weight-Semibold);
   --Typography-Display-Title-sm-Title-sm-medium:   var(--Typography-Weight-Medium);
   --Typography-Display-Title-sm-Title-sm-regular:  var(--Typography-Weight-Regular);
 
   /* Heading/H1 */
   --Typography-Heading-H1-H1-size:     var(--Typography-size-size-60);
   --Typography-Heading-H1-H1-lh:       var(--Typography-lineHeight-lineheight-90);
   --Typography-Heading-H1-H1-bold:     var(--Typography-Weight-Bold);
   --Typography-Heading-H1-H1-semibold: var(--Typography-Weight-Semibold);
   --Typography-Heading-H1-H1-medium:   var(--Typography-Weight-Medium);
   --Typography-Heading-H1-H1-regular:  var(--Typography-Weight-Regular);
 
   /* Heading/H2 */
   --Typography-Heading-H2-H2-size:     var(--Typography-size-size-28);
   --Typography-Heading-H2-H2-lh:       var(--Typography-lineHeight-lineheight-44);
   --Typography-Heading-H2-H2-bold:     var(--Typography-Weight-Bold);
   --Typography-Heading-H2-H2-semibold: var(--Typography-Weight-Semibold);
   --Typography-Heading-H2-H2-medium:   var(--Typography-Weight-Medium);
   --Typography-Heading-H2-H2-regular:  var(--Typography-Weight-Regular);
 
   /* Heading/H3 */
   --Typography-Heading-H3-H3-size:     var(--Typography-size-size-24);
   --Typography-Heading-H3-H3-lh:       var(--Typography-lineHeight-lineheight-36);
   --Typography-Heading-H3-H3-bold:     var(--Typography-Weight-Bold);
   --Typography-Heading-H3-H3-semibold: var(--Typography-Weight-Semibold);
   --Typography-Heading-H3-H3-medium:   var(--Typography-Weight-Medium);
   --Typography-Heading-H3-H3-regular:  var(--Typography-Weight-Regular);
 
   /* Heading/H4 */
   --Typography-Heading-H4-H4-size:     var(--Typography-size-size-20);
   --Typography-Heading-H4-H4-lh:       var(--Typography-lineHeight-lineheight-32);
   --Typography-Heading-H4-H4-bold:     var(--Typography-Weight-Bold);
   --Typography-Heading-H4-H4-semibold: var(--Typography-Weight-Semibold);
   --Typography-Heading-H4-H4-medium:   var(--Typography-Weight-Medium);
   --Typography-Heading-H4-H4-regular:  var(--Typography-Weight-Regular);
 
   /* Heading/H5 */
   --Typography-Heading-H5-H5-size:     var(--Typography-size-size-18);
   --Typography-Heading-H5-H5-lh:       var(--Typography-lineHeight-lineheight-28);
   --Typography-Heading-H5-H5-bold:     var(--Typography-Weight-Bold);
   --Typography-Heading-H5-H5-semibold: var(--Typography-Weight-Semibold);
   --Typography-Heading-H5-H5-medium:   var(--Typography-Weight-Medium);
   --Typography-Heading-H5-H5-regular:  var(--Typography-Weight-Regular);
 
   /* Heading/H6 */
   --Typography-Heading-H6-H6-size:     var(--Typography-size-size-18);
   --Typography-Heading-H6-H6-lh:       var(--Typography-lineHeight-lineheight-28);
   --Typography-Heading-H6-H6-bold:     var(--Typography-Weight-Bold);
   --Typography-Heading-H6-H6-semibold: var(--Typography-Weight-Semibold);
   --Typography-Heading-H6-H6-medium:   var(--Typography-Weight-Medium);
   --Typography-Heading-H6-H6-regular:  var(--Typography-Weight-Regular);
 
   /* Body/lg */
   --Typography-Body-lg-lg-size:     var(--Typography-size-size-18);
   --Typography-Body-lg-lg-lh:       var(--Typography-lineHeight-lineheight-28);
   --Typography-Body-lg-lg-bold:     var(--Typography-Weight-Bold);
   --Typography-Body-lg-lg-semibold: var(--Typography-Weight-Semibold);
   --Typography-Body-lg-lg-medium:   var(--Typography-Weight-Medium);
   --Typography-Body-lg-lg-regular:  var(--Typography-Weight-Regular);
 
   /* Body/md */
   --Typography-Body-md-md-size:     var(--Typography-size-size-16);
   --Typography-Body-md-md-lh:       var(--Typography-lineHeight-lineheight-24);
   --Typography-Body-md-md-bold:     var(--Typography-Weight-Bold);
   --Typography-Body-md-md-semibold: var(--Typography-Weight-Semibold);
   --Typography-Body-md-md-medium:   var(--Typography-Weight-Medium);
   --Typography-Body-md-md-regular:  var(--Typography-Weight-Regular);
 
   /* Body/sm */
   --Typography-Body-sm-sm-size:     var(--Typography-size-size-14);
   --Typography-Body-sm-sm-lh:       var(--Typography-lineHeight-lineheight-20);
   --Typography-Body-sm-sm-bold:     var(--Typography-Weight-Bold);
   --Typography-Body-sm-sm-semibold: var(--Typography-Weight-Semibold);
   --Typography-Body-sm-sm-medium:   var(--Typography-Weight-Medium);
   --Typography-Body-sm-sm-regular:  var(--Typography-Weight-Regular);
 
   /* Caption/xs */
   --Typography-Caption-xs-xs-size:     var(--Typography-size-size-12);
   --Typography-Caption-xs-xs-lh:       var(--Typography-lineHeight-lineheight-16);
   --Typography-Caption-xs-xs-bold:     var(--Typography-Weight-Bold);
   --Typography-Caption-xs-xs-semibold: var(--Typography-Weight-Semibold);
   --Typography-Caption-xs-xs-medium:   var(--Typography-Weight-Medium);
   --Typography-Caption-xs-xs-regular:  var(--Typography-Weight-Regular);
 }
 
 /* ----------------------------------------
    SEMANTIC TOKENS — TABLET
 ---------------------------------------- */
  @media (min-width: 768px) and (max-width: 1024px) {
   :root {
     --Typography-Display-2xl-2xl-size: var(--Typography-size-size-48);
     --Typography-Display-2xl-2xl-lh:   var(--Typography-lineHeight-lineheight-72);
 
     --Typography-Display-xl-xl-size: var(--Typography-size-size-48);
     --Typography-Display-xl-xl-lh:   var(--Typography-lineHeight-lineheight-64);
 
     --Typography-Display-Title-Title-size: var(--Typography-size-size-28);
     --Typography-Display-Title-Title-lh:   var(--Typography-lineHeight-lineheight-40);
 
     --Typography-Display-Title-sm-Title-sm-size: var(--Typography-size-size-18);
     --Typography-Display-Title-sm-Title-sm-lh:   var(--Typography-lineHeight-lineheight-28);
 
     --Typography-Heading-H1-H1-size: var(--Typography-size-size-56);
     --Typography-Heading-H1-H1-lh:   var(--Typography-lineHeight-lineheight-84);
 
     --Typography-Heading-H2-H2-size: var(--Typography-size-size-24);
     --Typography-Heading-H2-H2-lh:   var(--Typography-lineHeight-lineheight-36);
 
     --Typography-Heading-H3-H3-size: var(--Typography-size-size-20);
     --Typography-Heading-H3-H3-lh:   var(--Typography-lineHeight-lineheight-32);
 
     --Typography-Heading-H4-H4-size: var(--Typography-size-size-18);
     --Typography-Heading-H4-H4-lh:   var(--Typography-lineHeight-lineheight-28);
 
     --Typography-Heading-H5-H5-size: var(--Typography-size-size-16);
     --Typography-Heading-H5-H5-lh:   var(--Typography-lineHeight-lineheight-24);
 
     --Typography-Heading-H6-H6-size: var(--Typography-size-size-16);
     --Typography-Heading-H6-H6-lh:   var(--Typography-lineHeight-lineheight-24);
   }
 }
 
 /* ----------------------------------------
    SEMANTIC TOKENS — MOBILE 
 ---------------------------------------- */
 @media (max-width: 767.98px) {
   :root {
     --Typography-Display-2xl-2xl-size: var(--Typography-size-size-36);
     --Typography-Display-2xl-2xl-lh:   var(--Typography-lineHeight-lineheight-64);
 
     --Typography-Display-xl-xl-size: var(--Typography-size-size-40);
     --Typography-Display-xl-xl-lh:   var(--Typography-lineHeight-lineheight-56);
 
     --Typography-Display-Title-Title-size: var(--Typography-size-size-24);
     --Typography-Display-Title-Title-lh:   var(--Typography-lineHeight-lineheight-36);
 
     --Typography-Display-Title-sm-Title-sm-size: var(--Typography-size-size-16);
     --Typography-Display-Title-sm-Title-sm-lh:   var(--Typography-lineHeight-lineheight-24);
 
     --Typography-Heading-H1-H1-size: var(--Typography-size-size-48);
     --Typography-Heading-H1-H1-lh:   var(--Typography-lineHeight-lineheight-72);
 
     --Typography-Heading-H2-H2-size: var(--Typography-size-size-20);
     --Typography-Heading-H2-H2-lh:   var(--Typography-lineHeight-lineheight-32);
 
     --Typography-Heading-H3-H3-size: var(--Typography-size-size-18);
     --Typography-Heading-H3-H3-lh:   var(--Typography-lineHeight-lineheight-28);
 
     --Typography-Heading-H4-H4-size: var(--Typography-size-size-16);
     --Typography-Heading-H4-H4-lh:   var(--Typography-lineHeight-lineheight-24);
 
     --Typography-Heading-H5-H5-size: var(--Typography-size-size-14);
     --Typography-Heading-H5-H5-lh:   var(--Typography-lineHeight-lineheight-20);
 
     --Typography-Heading-H6-H6-size: var(--Typography-size-size-14);
     --Typography-Heading-H6-H6-lh:   var(--Typography-lineHeight-lineheight-20);
 
     --Typography-Body-lg-lg-size: var(--Typography-size-size-16);
     --Typography-Body-lg-lg-lh:   var(--Typography-lineHeight-lineheight-28);
   }
 }
 
 /* ----------------------------------------
    BASE STYLES
 ---------------------------------------- */
 body {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Body-md-md-size);
   line-height: var(--Typography-Body-md-md-lh);
   font-weight: var(--Typography-Body-md-md-regular);
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--Typography-family-font-family-sans);
   font-weight: var(--Typography-Weight-Bold);
 }
 
 /* ----------------------------------------
    TYPOGRAPHY UTILITY CLASSES
 ---------------------------------------- */
 
 .display-2xl {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Display-2xl-2xl-size);
   line-height: var(--Typography-Display-2xl-2xl-lh);
 }
 
 .display-xl {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Display-xl-xl-size);
   line-height: var(--Typography-Display-xl-xl-lh);
 }
 
 .display-title {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Display-Title-Title-size);
   line-height: var(--Typography-Display-Title-Title-lh);
 }
 
 .display-title-sm {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Display-Title-sm-Title-sm-size);
   line-height: var(--Typography-Display-Title-sm-Title-sm-lh);
 }
 
 h1, .h1 {
   font-size: var(--Typography-Heading-H1-H1-size);
   line-height: var(--Typography-Heading-H1-H1-lh);
 }
 h2, .h2 {
   font-size: var(--Typography-Heading-H2-H2-size);
   line-height: var(--Typography-Heading-H2-H2-lh);
 }
 h3, .h3 {
   font-size: var(--Typography-Heading-H3-H3-size);
   line-height: var(--Typography-Heading-H3-H3-lh);
 }
 h4, .h4 {
   font-size: var(--Typography-Heading-H4-H4-size);
   line-height: var(--Typography-Heading-H4-H4-lh);
 }
 h5, .h5 {
   font-size: var(--Typography-Heading-H5-H5-size);
   line-height: var(--Typography-Heading-H5-H5-lh);
 }
 h6, .h6 {
   font-size: var(--Typography-Heading-H6-H6-size);
   line-height: var(--Typography-Heading-H6-H6-lh);
 }
 
 .body-lg {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Body-lg-lg-size);
   line-height: var(--Typography-Body-lg-lg-lh);
 }
 .body-md {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Body-md-md-size);
   line-height: var(--Typography-Body-md-md-lh);
 }
 .body-sm {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Body-sm-sm-size);
   line-height: var(--Typography-Body-sm-sm-lh);
 }
 
 .caption, .text-xs {
   font-family: var(--Typography-family-font-family-sans);
   font-size: var(--Typography-Caption-xs-xs-size);
   line-height: var(--Typography-Caption-xs-xs-lh);
 }
 
 /* ----------------------------------------
    WEIGHT UTILITIES
 ---------------------------------------- */
 .font-regular  { font-weight: var(--Typography-Weight-Regular); }
 .font-medium   { font-weight: var(--Typography-Weight-Medium); }
 .font-semibold { font-weight: var(--Typography-Weight-Semibold); }
 .font-bold     { font-weight: var(--Typography-Weight-Bold); }
 
 /* ----------------------------------------
    COLOR UTILITIES
 ---------------------------------------- */
 .text-white        { color: var(--Color-Base-White); }
 .text-black        { color: var(--Color-Base-Black); }
 .text-primary      { color: var(--Color-Brand-blue-brand-main); }
 .text-red          { color: var(--Color-Base-Red); }
 .text-green        { color: var(--Color-Base-Green); }
 .text-orange       { color: var(--Color-Base-Orange); }
 .text-grey-900     { color: var(--Color-Neutral-grey-900); }
 .text-grey-800     { color: var(--Color-Neutral-grey-800); }
 .text-grey-700     { color: var(--Color-Neutral-grey-700); }
 .text-brand-primary-default { color: var(--Text-Brand-Primary-Default); }
 .text-base-black   { color: var(--Text-Base-Black); }
 
 .bg-white          { background-color: var(--Color-Base-White); }
 .bg-black          { background-color: var(--Color-Base-Black); }
 .bg-primary        { background-color: var(--Color-Brand-blue-brand-main); }
 .bg-grey-50        { background-color: var(--Color-Neutral-grey-50); }
 .bg-grey-100       { background-color: var(--Color-Neutral-grey-100); }
 
 /* ----------------------------------------
    SPACING UTILITIES
 ---------------------------------------- */
 .gap-4  { gap: var(--space-4); }
 .gap-8  { gap: var(--space-8); }
 .gap-16 { gap: var(--space-16); }
 .gap-24 { gap: var(--space-24); }
 .gap-32 { gap: var(--space-32); }
 .gap-40 { gap: var(--space-40); }
 .gap-48 { gap: var(--space-48); }
 
 .p-4  { padding: var(--space-4); }
 .p-8  { padding: var(--space-8); }
 .p-16 { padding: var(--space-16); }
 .p-24 { padding: var(--space-24); }
 .p-32 { padding: var(--space-32); }
 .p-40 { padding: var(--space-40); }
 .p-48 { padding: var(--space-48); }
 
 .mt-4  { margin-top: var(--space-4); }
 .mt-8  { margin-top: var(--space-8); }
 .mt-16 { margin-top: var(--space-16); }
 .mt-24 { margin-top: var(--space-24); }
 .mt-32 { margin-top: var(--space-32); }
 
 .mb-4  { margin-bottom: var(--space-4); }
 .mb-8  { margin-bottom: var(--space-8); }
 .mb-16 { margin-bottom: var(--space-16); }
 .mb-24 { margin-bottom: var(--space-24); }
 .mb-32 { margin-bottom: var(--space-32); }
 
 /* ----------------------------------------
    RADIUS UTILITIES
 ---------------------------------------- */
 .rounded-0    { border-radius: var(--radius-0); }
 .rounded-4    { border-radius: var(--radius-4); }
 .rounded-8    { border-radius: var(--radius-8); }
 .rounded-16   { border-radius: var(--radius-16); }
 .rounded-24   { border-radius: var(--radius-24); }
 .rounded-32   { border-radius: var(--radius-32); }
 .rounded-full { border-radius: var(--radius-full); }

 /* ----------------------------------------
   SEMANTIC TOKENS — Color (from Figma)
---------------------------------------- */
:root {
  /* Text */
  --text-secondary:              var(--Color-Base-Black);
  --Text-Neutral-Primary:        var(--Color-Neutral-grey-700);
  --Text-Neutral-Secondary:      var(--Color-Neutral-grey-600);
  --Text-Neutral-Tertiary:       var(--Color-Neutral-grey-300);
  --Text-Base-Black:             var(--Color-Base-Black);
  --Text-Base-Black-50:          var(--Color-Base-Black-50);
  --Text-Base-White:             var(--Color-Base-White);
  --Text-Base-white-50:          var(--Color-Base-White-50);
  --Text-Base-error:             var(--Color-Base-Red);
  --Text-Base-Success:           var(--Color-Base-Green);
  --Text-Base-Warning:           var(--Color-Base-Orange);
  --Text-Brand-Primary-Default:  var(--Color-Brand-blue-brand-main);
  --Text-Brand-Primary-Hover:    var(--Color-Brand-blue-800);

  /* Border */
  --Border-border-brand:            var(--Color-Brand-blue-200);
  --Border-Neutral-Primary:         var(--Color-Neutral-grey-700);
  --Border-Neutral-Secondary:       var(--Color-Neutral-grey-600);
  --Border-Neutral-Tertiary:        var(--Color-Neutral-grey-300);
  --Border-Base-Black:              var(--Color-Base-Black);
  --Border-Base-White:              var(--Color-Base-White);
  --Border-Base-white-50:           var(--Color-Base-White-50);
  --Border-Brand-Primary-Default:   var(--Color-Brand-blue-brand-main);
  --Border-Brand-Primary-Hover:     var(--Color-Brand-blue-600);
  --Border-Brand-Primary-50:        var(--Color-Brand-blue-brand-main-50);
  --Border-Brand-Secondary-Default: var(--Color-Brand-yellow-300);
  --Border-Brand-Secondary-Hover:   var(--Color-Brand-yellow-300);
  --Border-Brand-Tri-Default:       var(--Color-Brand-blue-700);
  --Border-Brand-Tri-Hover:         var(--Color-Brand-blue-900-trans-50);

  /* Background */
  --Background-bg-primary:              var(--Color-Base-White);
  --Background-bg-brand:                var(--Color-Brand-blue-500);
  --Background-Neutral-Primary:         var(--Color-Neutral-grey-700);
  --Background-Neutral-Secondary:       var(--Color-Neutral-grey-600);
  --Background-Neutral-Tertiary:        var(--Color-Neutral-grey-300);
  --Background-Base-Black:              var(--Color-Base-Black);
  --Background-Base-White:              var(--Color-Base-White);
  --Background-Base-white-50:           var(--Color-Base-White-50);
  --Background-Base-transparent-1:      var(--Color-Base-Transparent);
  --Background-Brand-Primary-Default:   var(--Color-Brand-blue-brand-main);
  --Background-Brand-Primary-Hover:     var(--Color-Brand-blue-brand-main-soft);
  --Background-Brand-Primary-50:        var(--Color-Brand-blue-brand-main-50);
  --Background-Brand-Secondary-Default: var(--Color-Brand-blue-700);
  --Background-Brand-Secondary-Hover:   var(--Color-Brand-blue-900-trans-50);

  /* Icon */
  --Icon-bg-primary:            var(--Color-Base-White);
  --Icon-bg-brand:              var(--Color-Brand-blue-500);
  --Icon-Neutral-Primary:       var(--Color-Neutral-grey-700);
  --Icon-Neutral-Secondary:     var(--Color-Neutral-grey-600);
  --Icon-Neutral-Tertiary:      var(--Color-Neutral-grey-300);
  --Icon-Base-Black:            var(--Color-Base-Black);
  --Icon-Base-White:            var(--Color-Base-White);
  --Icon-Base-white-50:         var(--Color-Base-White-50);
  --Icon-Brand-Primary-Default: var(--Color-Brand-blue-brand-main);
  --Icon-Brand-Primary-Hover:   var(--Color-Brand-blue-800);
}