:root {
  /* Base Direction */
  --rtl: rtl;
  --ltr: ltr;
  --none: none;

  /*Letter Spacing*/
  --ls-0: 0;
  --ls-1: 1px;
  --ls-2: 2px;

  /* text align */
  --text-r: right;
  --text-l: left;
  --text-c: center;
  --text-justify: justify;

  /* Spacing */
  --sp-0: 0;
  --sp-1xs: 0.1rem;
  --sp-2xs: 0.2rem;
  --sp-3xs: 0.3rem;
  --sp-4xs: 0.4rem;

  --sp: 0.25rem;
  --sp-1: calc(var(--sp) * 1); /* 0.25rem */
  --sp-2: calc(var(--sp) * 2); /* 0.5rem */
  --sp-3: calc(var(--sp) * 3); /* 0.75rem */
  --sp-4: calc(var(--sp) * 4); /* 1rem */
  --sp-5: calc(var(--sp) * 5); /* 1.25rem */
  --sp-6: calc(var(--sp) * 6); /* 1.5rem */
  --sp-7: calc(var(--sp) * 7); /* 1.75rem */
  --sp-8: calc(var(--sp) * 8); /* 2rem */
  --sp-9: calc(var(--sp) * 9); /* 2.25rem */
  --sp-10: calc(var(--sp) * 10); /* 2.5rem */
  --sp-11: calc(var(--sp) * 11); /* 2.75rem */
  --sp-12: calc(var(--sp) * 12); /* 3rem */
  --sp-13: calc(var(--sp) * 13); /* 3.25rem */
  --sp-14: calc(var(--sp) * 14); /* 3.5rem */
  --sp-16: calc(var(--sp) * 16); /* 4rem */
  --sp-24: calc(var(--sp) * 24); /* 6rem */
  --sp-28: calc(var(--sp) * 28); /* 7rem */
  --sp-30: calc(var(--sp) * 30); /* 7.5rem */
  --sp-32: calc(var(--sp) * 32); /* 8rem */

  /* Gaps */
  --gap-0: 0;
  --gap-1: var(--sp);
  --gap-2: var(--sp-2);
  --gap-base: var(--sp-4);
  --gap-4: var(--sp-6);
  --gap-5: var(--sp-8);
  --gap-6: var(--sp-10);

  /* Size */
  --s-5: 5%;
  --s-10: 10%;
  --s-15: 15%;
  --s-16: 16.666%;
  --s-20: 20%;
  --s-25: 25%;
  --s-30: 30%;
  --s-33: 33.333%;
  --s-35: 35%;
  --s-40: 40%;
  --s-45: 45%;
  --s-50: 50%;
  --s-55: 55%;
  --s-60: 60%;
  --s-65: 65%;
  --s-66: 66.666%;
  --s-70: 70%;
  --s-75: 75%;
  --s-80: 80%;
  --s-85: 85%;
  --s-90: 90%;
  --s-95: 95%;
  --s-100: 100%;

  --s-auto: auto;
  --s-fit: fit-content;
  --s-min: min-content;
  --s-max: max-content;

  /* Opacity */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-35: 0.35;
  --opacity-40: 0.4;
  --opacity-45: 0.45;
  --opacity-50: 0.5;
  --opacity-55: 0.55;
  --opacity-60: 0.6;
  --opacity-65: 0.65;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-85: 0.85;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  --opacity-hover: var(--opacity-10);
  --opacity-disabled: var(--opacity-40);
  --opacity-overlay: var(--opacity-60);

  /* Line */
  --solid: solid;
  --dashed: dashed;
  --dotted: dotted;
  --double: double;

  /* Border Radius */
  --rounded-full: 50rem;

  /* Shadows */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);

  /* Display */
  --d-in: inline;
  --d-in-block: inline-block;
  --d-block: block;

  --d-flex: flex;
  --d-in-flex: inline-flex;

  /* Flex Direction */
  --dir-row: row;
  --dir-row-rev: row-reverse;
  --dir-col: column;
  --dir-col-rev: column-reverse;

  /* Justify Content */
  --just-start: flex-start;
  --just-end: flex-end;
  --just-center: center;
  --just-between: space-between;
  --just-around: space-around;
  --just-evenly: space-evenly;

  /* Align Items */
  --item-start: flex-start;
  --item-end: flex-end;
  --item-center: center;
  --item-base: baseline;
  --item-stretch: stretch;

  /* Align Content */
  --cont-start: flex-start;
  --cont-end: flex-end;
  --cont-center: center;
  --cont-between: space-between;
  --cont-around: space-around;
  --cont-stretch: stretch;

  /* Align Self */
  --self-start: flex-start;
  --self-end: flex-end;
  --self-center: center;
  --self-base: baseline;
  --self-stretch: stretch;

  /* Flex Wrap */
  --wrap: wrap;
  --nowrap: nowrap;
  --wrap-rev: wrap-reverse;

  /* Flex Size */
  --flex: 1;
  --flex-0: 0;
  --flex-1: 1 0 auto;

  /* Flex Grow */
  --grow-0: 0;
  --grow-1: 1;

  /* Flex Shrink */
  --shrink-0: 0;
  --shrink-1: 1;

  /* Position */
  --relative: relative;
  --absolute: absolute;
  --fixed: fixed;
  --sticky: sticky;
  --static: static;

  --w100: 100%;
  --h100: 100%;
  --vh100: 100vh;

  --z-index-auto: auto;
  --z-index-negative: -1;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
  --z-index-up: 9999;

  --cursor-auto: auto;
  --cursor-default: default;
  --cursor-pointer: pointer;
  --cursor-wait: wait;
  --cursor-text: text;
  --cursor-move: move;
  --cursor-not-allowed: not-allowed;
  --cursor-help: help;

  /* Timing Functions */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --duration-0: 0s;
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Delays */
  --delay-0: 0s;
  --delay-75: 75ms;
  --delay-100: 100ms;
  --delay-150: 150ms;

  --transition-base: 0.3s ease-in-out;
  --transition-fast: 0.15s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}