:root {
  --weight: 600;
  --fs: clamp(0.96rem, 1vw + 0.5rem, 1.6rem);
  --p: 1rem;
  --px: var(--p);
  --py: var(--p);
  --m: 0.75rem;
  --mx: var(--m);
  --my: var(--m);
  --weight: 600;
  --radius: 0.5rem;
  --placeholder-color: gray;
  --placeholder-style: italic;
  --placeholder-fs: smaller;
  --transition: all 0.25s linear;
  --tran-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // * responsive fonts sizes
  --fs-0: clamp(.9rem, 4vw - 1rem, 1.12rem); // 16px default
  --fs-1: clamp(0.65rem, 1.3vw + 0.25rem, 0.75rem); // 12px
  --fs-2: clamp(0.7rem, 2vw - 0.5rem, 0.875rem); // 14px
  --fs-3: clamp(0.85rem, 2vw - 0.25rem, 0.925rem); // 18px
  --fs-4: clamp(0.9rem, 2vw - 0.25rem, 1.313rem); // 21px
  --fs-5: clamp(0.94rem, 2vw - 0.25rem, 1.463rem); // 25px
  --fs-6: clamp(1rem, 2vw + 0.75rem, 2rem); // 32px
  --fs-7: clamp(1.1rem, 4vw - 0.25rem, 2.375rem); // 38px
  --fs-8: clamp(1.2rem, 4vw + 0.25rem, 3rem); // 48px
  --fs-9: clamp(1.2rem, 4vw + 0.5rem, 4rem); // 64px
  --fs-10: clamp(1.2rem, 5vw + 0.5rem, 4.5rem); // 72px
  --fs-11: clamp(1.2rem, 5vw + 0.75rem, 5.063rem); // 81px
  --fs-12: clamp(1.5rem, 5vw + 0.9rem, 6.375rem); // 101px

  --fs-xs: var(--fs-1);
  --fs-sm: var(--fs-3);
  --fs-base: var(--fs-0);
  --fs-md: var(--fs-5);
  --fs-lg: var(--fs-7);
  --fs-xl: var(--fs-9);
  --fs-xxl: var(--fs-11);
  --fs-xxxl: var(--fs-12);

  --display: var(--fs-12);

  --display-md: var(--fs-11);
  --display-sm: var(--fs-10);

  // h1
  --h1: var(--fs-11);
  // h2
  --h2: var(--fs-9);
  // h3
  --h3: var(--fs-8);
  // h4
  --h4: var(--fs-7);
  //h5
  --h5: var(--fs-6);
  // h6
  --h6: var(--fs-5);

  --spc-0: 0;
  --spc-1: 0.25rem;
  --spc-2: 0.5rem;
  --spc-3: 0.75rem;
  --spc-4: 1rem;
  --spc-5: 1.5;
  --spc-6: 2rem;
  --spc-7: 2.5rem;
  --spc-8: 3rem;
  --spc-9: 3.5rem;
  --spc-10: 4rem;
  --spc-11: 4.5rem;
  --spc-12: 5rem;
  --spc-13: 6rem;
  --spc-14: 7rem;
  --spc-15: 8rem;
  --spc-16: 9rem;
  --spc-17: 10rem;
  --spc-18: 11rem;
  --spc-19: 12rem;
  --spc-20: 13rem;

  // t-shirt sizes
  --spc: var(--spc-4);
  --spc-xs: var(--spc-1);
  --spc-sm: var(--spc-3);
  --spc-base: var(--spc-5);
  --spc-md: var(--spc-7);
  --spc-lg: var(--spc-9);
  --spc-xl: var(--spc-11);
  --spc-xxl: var(--spc-13);

  // vw units
  --vw-xs: 5vw;
  --vw-sm: 10vw;
  --vw-md: 20vw;
  --vw-lg: 50vw;
  --vw-xl: 80vw;
  --vw-xxl: 95vw;

  // vh units
  --vh-xs: 5vh;
  --vh-sm: 10vh;
  --vh-md: 20vh;
  --vh-lg: 50vh;
  --vh-xl: 80vh;
  --vh-xxl: 95vh;
}