:root {
  --cherp-header-h: 56px;

  --black-and-white-black-10: #f5f8fa;
  --black-and-white-black-20: #edf2f7;
  --black-and-white-black-30: #e2e8f0;
  --black-and-white-black-40: #d8dde3;
  --black-and-white-black-50: #cacfd2;
  --black-and-white-black-60: #a1a6a9;
  --black-and-white-black-70: #717578;
  --black-and-white-black-80: #353b3e;
  --black-and-white-black-90: #1a1f21;
  --black-and-white-white: #ffffff;

  --fontfamilies-inter: Inter;
  --fontfamilies-sora: Sora;

  --fontsize-0: 12px;
  --fontsize-1: 14px;
  --fontsize-2: 16px;
  --fontsize-3: 18px;
  --fontsize-4: 24px;

  --fontweights-regular: 400;
  --fontweights-medium: 500;
  --fontweights-semibold: 600;

  --gradient-blue: linear-gradient(90deg, #ffffff 0%, #fffdfa 57%, #f2feff 77.4%);
  --gradient-orange: linear-gradient(77deg, #ffffff 0%, #fffdfa 37.02%, #fdfffb 77.4%);

  --lineheight-tight: 16px;
  --lineheight-normal: 20px;
  --lineheight-relaxed: 24px;

  --main-main-blue: #14cce4;
  --main-main-blue-hover: #0fb8ce;
  --main-main-blue-active: #0da4b8;
  --main-main-orange: #f79214;

  --misc-cherry-20: #ffdef6;
  --misc-cherry-30: #ffbfed;
  --misc-cherry-70: #ad005f;

  --misc-grape-20: #f3e8ff;
  --misc-grape-30: #e9d4ff;
  --misc-grape-70: #8200db;

  --misc-main-20: #dafbff;
  --misc-main-30: #b9f7ff;
  --misc-main-40: #9ee2e8;
  --misc-main-70: #00535e;

  --semantic-green: #008236;
  --semantic-green-20: #dcfce7;
  --semantic-green-30: #8dd9a1;

  --semantic-orange-20: #fef6d3;
  --semantic-orange-30: #f5df87;
  --semantic-orange-70: #bb4d00;

  --semantic-red-20: #fef2f2;
  --semantic-red-30: #fecaca;
  --semantic-red-70: #b91c1c;

  /* Spacing scale (4px grid) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}