:root {

  /* ===========================================
     Color Primitives - Gray
  =========================================== */
  --color-gray-0:   #ffffff;
  --color-gray-50:  #f1f1f1;
  --color-gray-100: #e6e6e6;
  --color-gray-200: #cccccc;
  --color-gray-300: #b3b3b3;
  --color-gray-400: #999999;
  --color-gray-500: #808080;
  --color-gray-600: #666666;
  --color-gray-700: #4c4c4c;
  --color-gray-800: #333333;
  --color-gray-900: #191919;

  /* Color Primitives - Blue */
  --color-blue-100: #e6f5ff;
  --color-blue-200: #b3e0ff;
  --color-blue-300: #80ccff;
  --color-blue-400: #4db8ff;
  --color-blue-500: #0099ff;
  --color-blue-600: #007acc;
  --color-blue-700: #005c99;
  --color-blue-800: #003d66;
  --color-blue-900: #001f33;

  /* Color Primitives - Pink */
  --color-pink-100: #fde8ec;
  --color-pink-200: #f8b9c6;
  --color-pink-300: #f48aa0;
  --color-pink-400: #f05c7a;
  --color-pink-500: #ed4063;
  --color-pink-600: #d2143a;
  --color-pink-700: #a30f2d;
  --color-pink-800: #750b20;
  --color-pink-900: #460714;

  /* ===========================================
     Spacing Tokens (base unit: 8px)
  =========================================== */
  --spacing-none:    0px;
  --spacing-xxs:     4px;
  --spacing-xs:      8px;
  --spacing-xs-half: 12px;
  --spacing-s:       16px;
  --spacing-s-half:  20px;
  --spacing-sm:      24px;
  --spacing-sm-half: 28px;
  --spacing-ms:      32px;
  --spacing-md:      40px;
  --spacing-mx:      48px;
  --spacing-ml:      56px;
  --spacing-ls:      64px;
  --spacing-lg:      72px;
  --spacing-x:       80px;
  --spacing-xl:      88px;
  --spacing-2xl:     96px;
  --spacing-3xl:     104px;
  --spacing-4xl:     128px;

  /* ===========================================
     Border Radius Tokens
  =========================================== */
  --radius-none:    0px;
  --radius-xxs:     4px;
  --radius-xs:      8px;
  --radius-xs-half: 12px;
  --radius-s:       16px;
  --radius-s-half:  20px;
  --radius-sm:      24px;
  --radius-ms:      32px;
  --radius-md:      40px;
  --radius-ls:      64px;
  --radius-full:    9999px;

  /* ===========================================
     Border Tokens
  =========================================== */
  --border-primary: #dee6eb;

  /* ===========================================
     Text Color Tokens
  =========================================== */
  --text-placeholder:          #cccccc;
  --text-primary:              #333333;
  --text-secondary:            #666666;
  --text-tertiary:             #999999;
  --text-invert:               #ffffff;
  --text-emphasize-primary:    #0099ff;
  --text-emphasize-secondary:  #ed4063;

  /* ===========================================
     Surface Tokens
  =========================================== */
  --surface-primary:    #0099ff;
  --surface-secondary:  #ed4063;
  --surface-invert:     #ffffff;
  --surface-gray-light: #cccccc;
  --surface-gray-mid:   #999999;
  --surface-gray-dark:  #666666;

  /* ===========================================
     Button Tokens
  =========================================== */
  --btn-cta-primary-bg:       #ed4063;
  --btn-cta-primary-hover-bg: #f48aa0;
  --btn-cta-secondary-bg:       #0099ff;
  --btn-cta-secondary-hover-bg: #80ccff;
  --btn-normal-bg:       #333333;
  --btn-normal-hover-bg: #999999;
  --btn-danger-bg:       #e94aa9;
  --btn-danger-hover-bg: #f18dc9;
}