:root {


  /* Spacing */
  --spacing-0: 0px;
  --spacing-0-5: 4px;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 120px;


  /* Radius */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;


  /* Border Width */
  --border-width-none: 0px;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;


  /* Opacity */
  --opacity-state-hover: 0.08;
  --opacity-state-focus: 0.12;
  --opacity-state-pressed: 0.16;
  --opacity-disabled-content: 0.38;
  --opacity-disabled-container: 0.12;


  /* Elevation */
  --elevation-level-0: 0;
  --elevation-level-1: 1;
  --elevation-level-2: 2;
  --elevation-level-3: 3;
  --elevation-level-4: 4;
  --elevation-level-5: 5;


  /* Colors — Text */
  --color-text-primary: #333333;
  --color-text-secondary: #757575;
  --color-text-disabled: #bdbdbd;
  --color-text-white: #ffffff;
  --color-text-blue: #1f5fbf;
  --color-text-yellow: #9e7a00;
  --color-text-coral: #b84b3d;
  --color-text-mint: #4e8a2e;
  --color-text-violet: #957ab7;


  /* Colors — Surface */
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #fafafa;
  --color-surface-disabled: #f5f5f5;
  --color-surface-blue: #eaf4ff;
  --color-surface-yellow: #fff9e5;
  --color-surface-coral: #fff0ee;
  --color-surface-mint: #f3fceb;
  --color-surface-violet: #f3edfa;


  /* Colors — Icon */
  --color-icon-primary: #1f1f1f;
  --color-icon-secondary: #757575;
  --color-icon-disabled: #bdbdbd;
  --color-icon-inverse: #ffffff;
  --color-icon-blue: #2f7ae6;
  --color-icon-coral: #d96452;
  --color-icon-yellow: #ccaa39;
  --color-icon-mint: #91bf62;
  --color-icon-violet: #a17ccf;


  /* Colors — Border */
  --color-border-default: #eaeaea;
  --color-border-subtle: #dadada;
  --color-border-strong: #9e9e9e;
  --color-border-white: #ffffff;
  --color-border-blue: #7eb4ff;
  --color-border-coral: #ffb0a2;
  --color-border-yellow: #ffe08a;
  --color-border-mint: #cbeaa7;
  --color-border-violet: #ddc2ff;


  /* Colors — Brand */
  --color-brand-blue: #3a8dff;
  --color-brand-violet: #c59cf8;
  --color-brand-coral: #ff826e;
  --color-brand-yellow: #ffd64d;
  --color-brand-mint: #b8e986;
  --color-brand-white: #ffffff;


  /* Colors — Neutral Scale */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #eaeaea;
  --color-neutral-300: #dadada;
  --color-neutral-400: #bdbdbd;
  --color-neutral-500: #9e9e9e;
  --color-neutral-600: #757575;
  --color-neutral-700: #555555;
  --color-neutral-800: #333333;
  --color-neutral-900: #1f1f1f;


  /* Colors — Components */
  --color-button-cta: #333333;


  /* Typography — Font Families */
  --font-family-title: 'Sora', sans-serif;
  /*--font-family-body: 'Manrope', sans-serif;*/
  --font-family-body: 'Sora', sans-serif;
  --font-family-hand: 'Caveat', cursive;


  /* Typography — Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;


  /* Typography — Font Sizes */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-45: 45px;
  --font-size-57: 57px;


  /* Typography — Line Heights */
  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-28: 28px;
  --line-height-32: 32px;
  --line-height-36: 36px;
  --line-height-38: 38px;
  --line-height-40: 40px;
  --line-height-44: 44px;
  --line-height-52: 52px;
  --line-height-64: 64px;


  /* Typography — Letter Spacing */
  --letter-spacing-normal: 0px;
  --letter-spacing-dense-s: -0.25px;
  --letter-spacing-extended-s: 0.25px;
  --letter-spacing-extended-m: 0.4px;
}