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

  /* Main Colors */
  --main-color: #37bcad;
  --main-color-light: #a8d1cc;
  --main-color-bg: #ebfbf6;
  --main-color-lighter: #f2f7f5;
  --main-color-dark: #077a6d;
  --main-color-darker: #0f4942;

  --mix-color: #ff7f00;
  --mix-color-light: #edb57e;
  --mix-color-lighter: #fff9f3;
  --mix-color-dark: #bd5e00;

  /* Applied Colors */
  --primary: #0d6efd;
  --primary-light: #cfe2ff;
  --primary-dark: #0a58ca;

  --secondary: #6c757d;
  --secondary-light: #e9ecef;
  --secondary-dark: #495057;

  --light: #f8f9fa;
  --dark: #212529;

  /* State Colors */
  --success: #198754;
  --success-light: #d1e7dd;
  --success-dark: #146c43;

  --danger: #dc3545;
  --danger-light: #f8d7da;
  --danger-dark: #b02a37;

  --warning: #ffc107;
  --warning-light: #fff3cd;
  --warning-dark: #997404;

  --info: #0dcaf0;
  --info-light: #cff4fc;
  --info-dark: #087990;

  /* Base Colors */
  --white: #ffffff;
  --white-mid: rgba(255, 255, 255, 0.7);
  --white-light: rgba(255, 255, 255, 0.04);
  --white-lighter: rgba(255, 255, 255, 0.33);
  --black: #000000;
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  --text-color-muted: var(--gray-600);
  --text-color-light: var(--gray-500);
  --text-color-dark: var(--gray-900);
  --text-color-base: #000f24;
  --transparent: transparent;

  /* Typography */
  --f-base: "VM_Regular";
  --f-h1: "VM_Black";
  --f-h2: "VM_ExtraBold";
  --f-h3: "VM_Bold";
  --f-h4: "VM_SemiBold";
  --f-h5: "VM_Medium";
  --f-h6: "VM_Regular";

  /* Base Font Size */
  --fs-base: clamp(0.875rem, 0.75rem + 0.5vw, 1rem);

  /* Utility Font Sizes */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.1vw, 0.8rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.2vw, 0.95rem);
  --fs-md: clamp(1rem, 0.9rem + 0.25vw, 1.1rem);
  --fs-lg: clamp(1.125rem, 1rem + 0.3vw, 1.3rem);

  /* Heading Sizes */
  --h1-fs: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --h2-fs: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  --h3-fs: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --h4-fs: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
  --h5-fs: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
  --h6-fs: clamp(0.875rem, 0.7rem + 0.4vw, 1rem);

  --lh-1: 1;
  --lh-2: 1.1;
  --lh-3: 1.2;
  --lh-4: 1.5;
  --lh-5: 2;
  --lh-6: 2.2;

  /* Font Weight */
  --fw-Thin: 100;
  --fw-ExtraLight: 200;
  --fw-Light: 300;
  --fw-Regular: 400;
  --fw-Medium: 500;
  --fw-SemiBold: 600;
  --fw-Bold: 700;
  --fw-ExtraBold: 800;
  --fw-Black: 900;

  /*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;
}