:root {
  /* Type */
  --font-family: "Plus Jakarta Sans", sans-serif;
  --base-font-size: 16px;
  --line-height-md: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Colors */
  --white: #ffffff;
  --black: #000000;

  /* Primary Colors */
  --primary-lighter: #dae9ff;
  --primary-light: #6a8cff;
  --primary-default: #2735ff;
  --primary-dark: #1a237e;
  --primary-darker: #121654;

  /* Neutral Colors */
  --neutral-lighter: #d1d1d1;
  --neutral-light: #888888;
  --neutral-default: #5d5d5d;
  --neutral-dark: #454545;
  --neutral-darker: #262626;

  /* Success Colors */
  --success-lighter: #defbdd;
  --success-light: #bff4be;
  --success-default: #50d850;
  --success-dark: #1c9d1c;
  --success-darker: #072c08;

  /* Danger Colors */
  --danger-lighter: #ffe1e1;
  --danger-light: #ffc9c9;
  --danger-default: #fb6e6e;
  --danger-dark: #e02222;
  --danger-darker: #460909;

  /* Warning Colors */
  --warning-lighter: #f2f8c9;
  --warning-light: #eaf395;
  --warning-default: #e1e42b;
  --warning-dark: #b7a617;
  --warning-darker: #3c2b0c;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Padding */
  --padding-3xs: 2px;
  --padding-2xs: 4px;
  --padding-xs: 8px;
  --padding-sm: 12px;
  --padding-md: 16px;
  --padding-lg: 20px;
  --padding-xl: 24px;
  --padding-2xl: 32px;
  --padding-3xl: 36px;
  --padding-4xl: 40px;
  --padding-section-top-bottom: 56px;

  /* Gap */
  --gap-3xs: 4px;
  --gap-2xs: 8px;
  --gap-xs: 12px;
  --gap-sm: 16px;
  --gap-md: 20px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-2xl: 40px;

  /* Border */
  --border-xs: 1px;
  --border-sm: 2px;
  --border-md: 4px;

  /* Icon */
  --icon-sm: 20px;
  --icon-md: 36px;
  --icon-lg: 48px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms;
  --transition-medium: 300ms;
  --transition-slow: 500ms;
}
